Tidy up download link positioning

assets_site/partials/websites/patterns/block-dropdown.html

-<div class="download-dropdown-pane bottom dropdown-pane" id="example-dropdown" data-dropdown data-close-on-click="true" data-auto-focus="true">
-  <!-- <div class="dropdown-foundation">
-    <div class="dropdown-header">
-      <p class="dropdown-title">Install with Foundation CLI</p>
-      <a target="_blank" href="{{@root.root}}how-to.html#use"><img class="dropdown-help"src="{{@root.root}}assets/img/icons/help.svg" alt=""></a>
-    </div>
-    <div class="input-group">
-      <input class="input-group-field dropdown-input" type="text" value="foundation blocks install {{datakey}}">
-      <div class="input-group-button">
-        <input type="Copy" data-copy-input class="button dropdown-copy" value="Copy">
-      </div>
-    </div>
-  </div> -->
-  <div><a class="button" href="{{@root.root}}files/building-blocks/{{datakey}}.zip">Download zip</a></div>
-  <p>The zip contains the sample HTML and any spaecial CSS or JS needed to implement this pattern.</p>
-  <a class="small readmore" href="{{@root.root}}websites/patterns/howto#use">More on how to use this</a>
-</div>
+<p>
+  Get a zip with all the sample HTML and any spaecial CSS or JS needed:
+  <a class="readmore" href="{{@root.root}}files/building-blocks/{{datakey}}.zip"><i class="icon icon-functional" data-icon="="></i> Download a ZIP file</a>
+  <a class="float-right secondary" target="_blank" href="{{@root.root}}websites/patterns/howto#use"><i class="icon icon-generic" data-icon="?"></i> More on how to use this</a>
+</p>

assets_site/partials/websites/patterns/building-block-code.html

 <div class="row">
 <h3 class="padding-left-small">Implementation code</h3>
+{{> block-dropdown block}}
 <div class="building-block-code">
   <!-- Code Menu -->
   {{{bb-code-buttons page}}}

assets_site/partials/websites/patterns/building-block-header.html

 <div class="building-block-header">
   <div class="row align-top align-justify">
-    <div class="small-12 medium-7 large-8 columns">
+    <div class="small-12 columns">
       <div class="building-block-header-name-section">
         <h2 class="">{{block.name}}</h2>
         <h3 class="building-block-author">{{#if block.author.github}}<img src="https://github.com/{{block.author.github}}.png?size=30" class="avatar content-right" height="" width="" alt="">{{/if}}By
@@ -18,11 +18,5 @@
       </div>
       <p>{{block.description}}</p>
     </div>
-    <div class="column small-12 medium-5 large-4 bb-actions">
-      <div>
-        <button class="button float-right hide-for-small-only" type="button" data-toggle="example-dropdown">Download<div class="arrow-down white"></div></button>
-        {{> block-dropdown block}}
-      </div>
-    </div>
   </div>
 </div>

assets_site/partials/websites/patterns/building-block-preview.html

 <div class="building-block-preview">
-  <div class="row align-center expanded building-block-iframe-wrapper">
+  <div class="row align-center expanded building-block-iframe-wrapper ">
     <iframe class="building-block-iframe" src="{{bb-iframe-path page}}" frameborder="0"></iframe>
   </div>
 </div>
+<hr/>

content/pages/websites/patterns/howto/index.html

 ---
 meta-title: How to
 title: How to use and submit patterns
-cta: Patterns are coded UI components designed to be dropped into projects.
+cta: Patterns are coded UI components designed to be dropped into projects. The intent of patterns are to solve common patterns, scaffold faster, and integrate with your existing styles right out of the box.
 filter-nav: false
 filter-dropdowns: false
 layout: static
 ---
 
-<div data-sticky-container>
-  <div class="top-bar" data-sticky data-margin-top="3" data-anchor="main-content-area" id="example-menu">
-    <div class="top-bar-left">
-      <ul class="menu no-underline" data-magellan>
-        <li>On this page:</li>
-        <li><a href="#what-is">What are patterns?</a></li>
-        <li><a href="#use">How to use a pattern</a></li>
-        <li><a href="#submit">Submitting your pattern</a></li>
-      </ul>
-    </div>
-  </div>
-</div>
 
 
 <br/>
 <!--what is a pattern-->
 
-<section id="what-is" data-magellan-target="what-is">
-<h3 class="how-to-header">What are patterns?</h3>
-{{#markdown}}
-
-Patterns are:
-
-- HTML, CSS, and JS snippets that work on EMBL-EBI project
-- Lightly styled components
-- Easy to extend or customize
-- Common solutions to layout or component challenges that are not core to the Framework
-
-Patterns are NOT:
-
-- Templates
-- Themes
-- Overly stylized
-- Code that does not integrate with EBI Visual Framework
+<div class="intro-unit ">
+  <h2 class="how-to-header">What are patterns?</h2>
+  <div class="row">
+  <div class="columns medium-6">
+  <h3 class="margin-bottom-none">Patterns are:</h3>
+  <ul>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="/"></span> HTML, CSS, and JS snippets</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="/"></span> Lightly styled components</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="/"></span> Easy to extend or customize</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="/"></span> Common solutions to layout or component challenges</li>
+  </ul>
+  </div>
+  <div class="columns medium-6">
+  <h3 class="margin-bottom-none">Patterns are NOT:</h3>
+  <ul>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="x"></span> Templates</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="x"></span> Themes</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="x"></span> Overly stylized</li>
+    <li class="icon-bullet"><span class="icon icon-functional" data-icon="x"></span> Code that does not integrate with EBI Visual Framework</li>
+  </ul>
+  </div>
+  </div>
 
-In short: The intent of patterns are to solve common patterns, scaffold faster, and integrate with your existing styles right out of the box.
+  <div data-sticky-container>
+    <div class="top-bar" data-sticky data-margin-top="3" data-anchor="magellan-content" id="on-page-menu">
+      <div class="top-bar-left">
+        <ul class="menu no-underline" data-magellan>
+          <li>On this page:</li>
+          <li><a href="#use">How to use a pattern</a></li>
+          <li><a href="#submit">Submitting your pattern</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
 
-<hr class="how-to-line">
-{{/markdown}}
-</section>
 
 <!--how to use-->
-
+<div id="magellan-content">
 <section id="use" data-magellan-target="use">
 {{#markdown}}
 
-### How To Use a pattern
+### How to use a pattern
 
 Patterns are easy to use in your projects whether you’re using a CSS version or the powerful ZURB Stack. Below, we’ve outlined how to get a pattern into your project in a snap and build faster.
 
@@ -61,10 +62,6 @@ Patterns are easy to use in your projects whether you’re using a CSS version o
 
 Like a pattern? You can copy the HTML and CSS/SCSS and JS (if applicable) from the pattern detail page. You’ll see a responsive preview and description at the top of the page. Below the preview you’ll find the code for the component.
 
-The HTML, CSS, and JS toggles let you focus on one section at a time if you’d like.
-
-<img src="{{root}}assets/img/images/top-section.png" class="" height="" width="" alt="">
-
 You can copy the the code from each code container using the handy copy button.
 
 <img src="{{root}}assets/img/images/copy-section.png" class="" height="" width="" alt="">
@@ -73,9 +70,6 @@ If you are using CSS vs SCSS, you can toggle to the compiled CSS using this hand
 
 <img src="{{root}}assets/img/images/css-section.png" class="" height="" width="" alt="">
 
-If you’re using the CSS version of Foundation, it’s best to add the CSS to your app.css file that is included with the downloaded Foundation CSS project. You can make any style overrides from there.
-
-If you’re using the ZURB Stack Sass version, a custom SCSS partial is the best place to add the pattern’s SCSS. The JS can be added to app.js. But if you’re a fan of optimization, we suggest you use the Foundation CLI install to do all this automatically for you. It’s rad!
 
 <h4 class="how-to-subheader" id="download-individual">(Option B) Download an individual pattern</h4>
 
@@ -210,3 +204,4 @@ Once you submit your pattern pull request, a member of the team will review it t
 {{/markdown}}
 
 </section>
+</div> <!-- / magellan-content -->