<div class="clearfix l-padded"></div>

<div id="hero" class="hero hero-sample hero-blur">
  <div>
    <div class="row">
      <div class="col-md-12">
        <div  class='text-center'>
          <div class="hero-block hero-blur-block">
            <h1 class="hero-block-title">Hero-Blur! w/ .hero-block-title.</h1>
            <div class="row">
              <div class="col-md-6 col-md-offset-3">
                <h3 class="hero-block-description page-title">And then you can use the hero-block-description to elaborate on why this page is going to be just what you needed!</h3>
              </div>
            </div>
            <div class="l-section-close">
              <%= link_to 'Primary Call-To-Action', '#', class: 'js-signup-intro btn btn-primary btn-lg hero-block-cta hero-block-cta-justified l-section-close', title: 'Primary Call-To-Action' %>
              <%= link_to 'Secondary CTA', '#', class: 'btn btn-secondary btn-lg hero-block-cta hero-block-cta-justified l-section-close', title: "Secondary Call-To-Action" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="clearfix l-padded"></div>

<div id="hero" class="hero hero-sample hero-blur">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="hero-block hero-blur-block hero-blur-block-side">
          <%= image_tag "forever_style_guide/artisan-logo.png", class: "hero-product-logo" %>
         <div class="row">
           <div class="col-sm-12">
             <h3 class="hero-block-description">Use a product logo w/ your hero-blur-block-side, just add the hero-product-logo class.</h3>
           </div>
         </div>
          <div class="row l-section hero-block-actions">
            <div class="col-md-12">
              <%= link_to 'Primary CTA', '#', class: 'btn btn-lg btn-artisan hero-block-cta', title: "Primary CTA" %>
              <%= link_to 'Secondary CTA', '#', class: 'btn btn-lg btn-artisan btn-inverse hero-block-cta ', title: "Secondary CTA" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="clearfix l-padded"></div>

<div class="hero hero-sample">
  <div class="container-fluid">
    <div class="row l-padded-thick">
      <div class="col-sm-6">
        <h1 class="color-white l-section">A basic .hero can be used w/ standard Bootstrap grids as well as our custom color and layout classes.</h1>
        <%= link_to 'Heroes are most effective w/ a clear Call to Action', '#', class: 'btn btn-lg btn-valet l-section', title: "Heroes are most effective w/ a clear Call to Action" %>
      </div>
    </div>
  </div>
</div>

<div class="clearfix l-padded"></div>

<div class="hero hero-sample hero-sm hero-shaded">
  <div class="container-fluid">
    <div class="row l-padded-thick">
      <div class="col-sm-6">
        <h2 class="l-section">Add the .hero-shaded class to add a gradient to the top of the image. Make sure your text is legible against your image at all sizes.</h2>
        <%= link_to 'Use brand colors for CTAs as appropriate', '#', class: 'btn btn-lg btn-historian l-section', title: "Use brand colors for CTAs as appropriate" %>
      </div>
    </div>
  </div>
</div>

<div class="clearfix l-padded"></div>

<div class="hero hero-sample hero-xs">
  <div class="container-fluid">
    <div class="row l-padded-thick">
      <div class="col-sm-6">
        <h2 class="l-section-close">Use these styles and your unique hero image to craft a compelling message.</h2>
        <%= link_to 'This CTA is wicked persuasive', '#', class: 'btn btn-lg btn-primary l-section-close', title: "This CTA is wicked persuasive" %>
      </div>
    </div>
  </div>
</div>