shibori 1.0.0.beta1

data/source/_patterns/01-molecules/00-text/01-intro-text.mustache

@@ -0,0 +1,5 @@
+<p class="intro">This is intro text to a paragraph. Fugit reprehenderit impedit delectus culpa vero voluptatibus recusandae sed, assumenda dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus est aliquid dolorum exercitationem eius explicabo, ratione doloremque. Mollitia a similique porro facilis, repellat sint sit atque, voluptatibus neque praesentium iusto.</p>
+
+<p class="intro light">This is intro text to a paragraph. Fugit reprehenderit impedit delectus culpa vero voluptatibus recusandae sed, assumenda dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus est aliquid dolorum exercitationem eius explicabo, ratione doloremque. Mollitia a similique porro facilis, repellat sint sit atque, voluptatibus neque praesentium iusto.</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit blanditiis, veritatis reiciendis placeat ipsum illo excepturi. Voluptatum nemo voluptatem temporibus, provident, nostrum quam nobis nam voluptate, accusantium quae, placeat similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit blanditiis, veritatis reiciendis placeat ipsum illo excepturi. Voluptatum nemo voluptatem temporibus, provident, nostrum quam nobis nam voluptate, accusantium quae, placeat similique.</p>

data/source/_patterns/01-molecules/01-layout/00-one-up.mustache

@@ -0,0 +1,8 @@
+<div class="sg-grid-example">
+  <div class="one-up">
+    <p>
+      <code>.one-up</code>
+    </p>
+    <div class="col">First <code>.col</code></div>
+  </div>
+</div>

data/source/_patterns/01-molecules/01-layout/01-two-up.mustache

@@ -0,0 +1,9 @@
+<div class="sg-grid-example">
+  <div class="two-up">
+    <p>
+      <code>.two-up</code>
+    </p>
+    <div class="col">First <code>.col</code></div>
+    <div class="col">Second <code>.col</code></div>
+  </div>
+</div>

data/source/_patterns/01-molecules/01-layout/02-three-up.mustache

@@ -0,0 +1,10 @@
+<div class="sg-grid-example">
+  <div class="three-up">
+    <p>
+      <code>.three-up</code>
+    </p>
+    <div class="col">First <code>.col</code></div>
+    <div class="col">Second <code>.col</code></div>
+    <div class="col">Third <code>.col</code></div>
+  </div>
+</div>

data/source/_patterns/01-molecules/01-layout/03-four-up.mustache

@@ -0,0 +1,11 @@
+<div class="sg-grid-example">
+  <div class="four-up">
+    <p>
+      <code>.four-up</code>
+    </p>
+    <div class="col">First <code>.col</code></div>
+    <div class="col">Second <code>.col</code></div>
+    <div class="col">Third <code>.col</code></div>
+    <div class="col">Fourth <code>.col</code></div>
+  </div>
+</div>

data/source/_patterns/01-molecules/01-layout/04-masonary-2.mustache

@@ -0,0 +1,24 @@
+<div class="sg-grid-example">
+  <div class="masonary-2">
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4>
+      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4>
+      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+    </div>
+  </div>
+</div>

data/source/_patterns/01-molecules/01-layout/05-masonary-3.mustache

@@ -0,0 +1,24 @@
+<div class="sg-grid-example">
+  <div class="masonary-3">
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4>
+      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4>
+      <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis.</p>
+    </div>
+    <div class="masonary-brick">
+      <h4>Section Title Here</h4><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod.Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+    </div>
+  </div>
+</div>

data/source/_patterns/01-molecules/02-navigation/01-subnav.mustache

@@ -0,0 +1,21 @@
+<div class="page-subnav">
+  <div class="wrapper wrapper-full">
+    <nav>
+      <ul class="subnav-inner">
+        <li>
+          <a href="#">Subnav item</a>
+        </li>
+        <li>
+          <a href="#">Subnav item</a>
+        </li>
+        <li class="active">
+          <a href="#">Subnav item</a>
+        </li>
+        <li>
+          <a href="#">Subnav item</a>
+        </li>
+      </ul>
+    </nav>
+    <a href="#" class="btn btn-sm pull-right">Button</a>
+  </div>
+</div>

data/source/_patterns/01-molecules/02-navigation/02-breadcrumbs.mustache

@@ -0,0 +1,25 @@
+<div class="breadcrumbs">
+  <div class="wrapper wrapper-full">
+    <nav>
+      <ul>
+        <li><a href="#">First Breadcrumb</a> /</li>
+        <li><a href="#">Second Breadcrumb</a> /</li>
+        <li><a href="#">Third Breadcrumb</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<br>
+
+<div class="breadcrumbs breadcrumbs-sm">
+  <div class="wrapper wrapper-full">
+    <nav>
+      <ul>
+        <li><a href="#">First Breadcrumb</a> /</li>
+        <li><a href="#">Second Breadcrumb</a> /</li>
+        <li><a href="#">Third Breadcrumb</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>

data/source/_patterns/01-molecules/02-navigation/03-side-nav.mustache

@@ -0,0 +1,11 @@
+<div class="list-nav">
+  <nav>
+    <h5>A page subnav for the sidebar</h5>
+    <ul>
+      <li><a href="#">Nav Item</a></li>
+      <li><a href="#">Nav Item</a></li>
+      <li class="active"><a href="#">Nav Item</a></li>
+      <li><a href="#">Nav Item</a></li>
+    </ul>
+  </nav>
+</div>

data/source/_patterns/01-molecules/02-navigation/04-side-nav-small.mustache

@@ -0,0 +1,32 @@
+<div class="list-nav list-nav-sm">
+  <nav>
+      <h5>Add-on Categories</h5>
+      <ul>
+        <li><a href="#">Add-on Categorie</a></li>
+        <li><a href="#">Data Stores</a></li>
+        <li><a href="#">Data Store Utilities</a></li>
+        <li><a href="#">Monitoring</a></li>
+        <li class="active"><a href="#">Logging</a></li>
+        <li><a href="#">Email/SMS</a></li>
+        <li><a href="#">Caching</a></li>
+        <li><a href="#">Errors and Exceptions</a></li>
+        <li><a href="#">Content Management</a></li>
+        <li><a href="#">Search</a></li>
+        <li><a href="#">Metrics and Analytics</a></li>
+        <li><a href="#">Testing</a></li>
+        <li><a href="#">Messaging and Queueing</a></li>
+        <li><a href="#">Network Services</a></li>
+        <li><a href="#">Alerts and Notifications</a></li>
+        <li><a href="#">User Management</a></li>
+        <li><a href="#">Development Tools</a></li>
+        <li><a href="#">Security Dynos</a></li>
+        <li><a href="#">Content</a></li>
+        <li><a href="#">Document Processing</a></li>
+        <li><a href="#">Image Processing</a></li>
+        <li><a href="#">Video Processing</a></li>
+        <li><a href="#">Deployment</a></li>
+        <li><a href="#">Utilities</a></li>
+        <li><a href="#">Payment</a></li>
+      </ul>
+    </nav>
+  </div>

data/source/_patterns/01-molecules/02-navigation/06-tabs.mustache

@@ -0,0 +1,46 @@
+<div class="tabs tabs-basic">
+
+  <div class="tab">
+
+    <input class="tab-radio" type="radio" id="tab-1" name="tab-set" checked>
+    <label class="tab-label" for="tab-1">Tuesday</label>
+
+    <div class="tab-panel">
+      <div class="tab-content">
+        <h4>Tab 1</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ducimus explicabo alias deleniti quia quibusdam hic dolorum sed, atque consectetur iusto assumenda sunt, recusandae molestias harum, nobis laudantium veritatis, ullam?</p>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="tab">
+
+    <input class="tab-radio" type="radio" id="tab-2" name="tab-set">
+    <label class="tab-label" for="tab-2">Wednesday</label>
+
+    <div class="tab-panel">
+      <div class="tab-content">
+        <h4>Tab 2</h4>
+        <p>Libero quibusdam ratione eveniet iure velit aspernatur cum, ipsa vero voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe adipisci quaerat velit, sunt illo voluptatum omnis animi cum sapiente facilis eaque eos aut voluptates molestias explicabo quis iure quas delectus!</p>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="tab">
+
+    <input class="tab-radio" type="radio" id="tab-3" name="tab-set">
+    <label class="tab-label" for="tab-3">Thursday</label>
+
+    <div class="tab-panel">
+      <div class="tab-content">
+        <h4>Tab 3</h4>
+        <p>Consectetur adipisicing elit. Labore ducimus explicabo alias deleniti quia quibusdam hic dolorum sed, atque consectetur iusto assumenda sunt, recusandae molestias harum, nobis laudantium veritatis, ullam?</p>
+      </div>
+    </div>
+
+  </div>
+
+</div>
+

data/source/_patterns/01-molecules/04-slider/00-slider.mustache

@@ -0,0 +1,8 @@
+<div class="slideshow">
+  <ul>
+    <li style="background: #79589F; height: 300px;"></li>
+    <li style="background: #4A90E2; height: 300px;"></li>
+    <li style="background: #74C080; height: 300px;"></li>
+    <li style="background: #FA9F47; height: 300px;"></li>
+  </ul>
+</div>

data/source/_patterns/01-molecules/05-messages/00-alert.mustache

@@ -0,0 +1,15 @@
+<div class="alert">
+  <p>This is a standard alert message for use on forms.</p>
+</div>
+
+<div class="alert alert-error">
+  <p>This is a standard alert message for use on forms.</p>
+</div>
+
+<div class="alert alert-valid">
+  <p>This is a standard alert message for use on forms.</p>
+</div>
+
+<div class="alert alert-warning">
+  <p>This is a standard alert message for use on forms.</p>
+</div>

data/source/_patterns/01-molecules/07-Elements/01-Addons-Card.mustache

@@ -0,0 +1,79 @@
+<div class="wrapper">
+    <div class="cards">
+        <div class="card addon cards-five-x">
+          <div class="beta" data-toggle="tooltip" data-placement="right" data-bind="if: isBeta, attr: { title: caption }">Beta</div>
+
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/1494/original.png?1409250403">
+            <h6 class="brand-title dark">Ziggeo</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Api for Video Recording and Playback</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/1447/original.png?1430224485">
+            <h6 class="brand-title dark">Xplenty</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Data Integration Service. Simplified.</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/1472/original.png?1411296149">
+            <h6 class="brand-title dark">Stream</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Build scalable newsfeeds &amp; activity streams in a few hours instead of weeks</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="beta" data-toggle="tooltip" data-placement="right" data-bind="if: isBeta, attr: { title: caption }">Beta</div>
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/1121/original.png?1383868081">
+            <h6 class="brand-title dark">wwwhisper</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Authentication and authorization</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/112/original.png?1383868129">
+            <h6 class="brand-title dark">SSL</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">SSL encryption for https:&#x2F;&#x2F; urls.</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/1327/original.png?1421843025">
+            <h6 class="brand-title dark">Transloadit</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Fantastic file uploading &amp; encoding. We support video, audio, images, docs.</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/971/original.png?1383868042">
+            <h6 class="brand-title dark">Swiftype Search &amp; Autocomplete</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Fast, modern search with autocomplete, query result management, and analytics.</p>
+          </div>
+        </div>
+        <div class="card addon cards-five-x">
+          <div class="brand">
+            <img class="brand-logo" alt="" src=
+            "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/icons/143/original.png?1429639356">
+            <h6 class="brand-title dark">Chargify</h6>
+            <div class="brand-bar addons"></div>
+            <p class="brand-body">Complete management of recurring revenue billing</p>
+          </div>
+        </div>
+    </div>
+</div>

data/source/_patterns/01-molecules/07-Elements/02-Buttons-Card.mustache

@@ -0,0 +1,131 @@
+<div class="elements wrapper">
+  <div class="cards">
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+    <div class="card cards-four-x button">
+      <a href="#">
+        <div class="brand">
+          <div class="brand-author">
+            <img class="brand-avatar" src="https://avatars0.githubusercontent.com/u/1294580?v=3&amp;s=200" alt="">
+            ParsePlatform
+          </div>
+          <h6 class="brand-title text-dark">Parse Server Example</h6>
+          <div class="brand-bar buttons"></div>
+          <p class="brand-body">An example Parse API server using the parse-server module.</p>
+        </div>
+        <div class="stats">
+          <ul>
+            <li class="tooltip-narrow-oneline" data-tooltip="1,020 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>1,020</li>
+            <li class="tooltip-narrow-oneline" data-tooltip="519 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>519</li>
+            <li class="element-type"><span class="hk-icon icon-xs hk-icon-deploy"></span></li>
+          </ul>
+        </div>
+      </a>
+    </div>
+
+  </div>
+</div>

data/source/_patterns/01-molecules/07-Elements/03-Buildpack-Card.mustache

@@ -0,0 +1,109 @@
+<div class="elements wrapper">
+  <div class="cards">
+
+      <div class="card cards-four-x buildpack">
+        <a href="#">
+          <div class="buildpack-official tooltip-narrow-oneline" data-tooltip="Officially Supported Buildpack"></div>
+
+          <div class="brand">
+            <div class="buildpack-author">
+              <img src="https://avatars.githubusercontent.com/u/23211?v=3" alt="" class="brand-avatar">
+              heroku
+            </div>
+
+            <h6 class="brand-title text-dark">heroku-buildpack-nodejs</h6>
+            <div class="brand-bar buildpacks"></div>
+
+            <p class="brand-body">
+              Last update: 13 days ago
+            </p>
+          </div>
+
+          <div class="stats">
+            <ul>
+              <li class="tooltip-narrow-oneline" data-tooltip="5,223 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>5,223</li>
+              <li class="tooltip-narrow-oneline" data-tooltip="707 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>707</li>
+              <li class="element-type buildpack"><span class="hk-icon icon-xs hk-icon-buildpack"></span></li>
+            </ul>
+          </div>
+        </a>
+      </div>
+
+      <div class="card cards-four-x buildpack">
+        <a href="#">
+          <div class="brand">
+            <div class="buildpack-author">
+              <img src="https://avatars.githubusercontent.com/u/974228?v=3" alt="" class="brand-avatar">
+              viththespace
+            </div>
+            <h6 class="brand-title text-dark">heroku-buildpack-vendorbinaries</h6>
+            <div class="brand-bar buildpacks"></div>
+            <p class="brand-body">
+              Last update: 13 days ago
+            </p>
+          </div>
+          <div class="stats">
+            <ul>
+              <li class="tooltip-narrow-oneline" data-tooltip="223 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>223</li>
+              <li class="tooltip-narrow-oneline" data-tooltip=" Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>0</li>
+              <li class="element-type buildpack"><span class="hk-icon icon-xs hk-icon-buildpack"></span></li>
+            </ul>
+          </div>
+        </a>
+      </div>
+
+      <div class="card cards-four-x buildpack">
+        <a href="#">
+          <div class="brand">
+            <div class="buildpack-author">
+              <img src="https://avatars.githubusercontent.com/u/3308?v=3" alt="" class="brand-avatar">
+              ddollar
+            </div>
+
+            <h6 class="brand-title text-dark">heroku-buildpack-apt</h6>
+            <div class="brand-bar buildpacks"></div>
+
+            <p class="brand-body">
+              Last update: 3 months ago
+            </p>
+          </div>
+
+          <div class="stats">
+            <ul>
+              <li class="tooltip-narrow-oneline" data-tooltip="253 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>5253</li>
+              <li class="tooltip-narrow-oneline" data-tooltip="111 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>111</li>
+              <li class="element-type buildpack"><span class="hk-icon icon-xs hk-icon-buildpack"></span></li>
+            </ul>
+          </div>
+        </a>
+      </div>
+      <div class="card cards-four-x buildpack">
+        <a href="#">
+          <div class="buildpack-official tooltip-narrow-oneline" data-tooltip="Officially Supported Buildpack"></div>
+
+          <div class="brand">
+            <div class="buildpack-author">
+              <img src="https://avatars.githubusercontent.com/u/23211?v=3" alt="" class="brand-avatar">
+              heroku
+            </div>
+
+            <h6 class="brand-title text-dark">heroku-buildpack-nodejs</h6>
+            <div class="brand-bar buildpacks"></div>
+
+            <p class="brand-body">
+              Last update: 13 days ago
+            </p>
+          </div>
+
+          <div class="stats">
+            <ul>
+              <li class="tooltip-narrow-oneline" data-tooltip="5,223 Recent Deploys"><span class="hk-icon icon-xs hk-icon-deploy"></span>5,223</li>
+              <li class="tooltip-narrow-oneline" data-tooltip="707 Stars"><span class="hk-icon icon-xs hk-icon-stars"></span>707</li>
+              <li class="element-type buildpack"><span class="hk-icon icon-xs hk-icon-buildpack"></span></li>
+            </ul>
+          </div>
+        </a>
+      </div>
+
+  </div>
+</div>