<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>

<!-- Promo banner markup -->
<div class="promo_banner container-fluid">
  <div class="row text-center">
    <div class="col-xs-12">

      <h3 class="page-title color-white hidden-xs">Promo Banner has a really compelling message!</h3>

      <%= link_to '#', title: "Holiay Gift Guide", class: 'btn btn-promo btn-action' do %>
        <i class="fa fa-gift btn-action-icon"></i>
        <label class="btn-action-label">And a sweet CTA</label>
      <% end %>

    </div>
  </div>
</div>

<!-- sample hero -->
<div class="hero hero-sample hero-blur">
  <div class="row">
    <div class="col-md-12">
      <div class='text-center'>
        <div class="hero-block hero-block-blur">
          <h1 class="hero-block-title">Here's our page headline.</h1>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <h3 class="hero-block-description page-title">This content exists independent of the promotion </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 class="container l-section">
  <div class="card l-section-far l-padded-thick">
  <h1>Promo Banner</h1>
    <p>To implement:</p>
    <ol>
      <li>Grab the promo markup and insert it onto your page immediately after your &lt;header&gt; element.</li>
      <li>Make your promo precedes any on page content</li>
      <li>You can customize the background-image and color etc. by changing the $promo-color variable and/or assigning a background-image to the .promo-banner class locally</li>
    </ol>
  </div>
</div>
<div class="col-xs-12 l-padded"></div>