---
layout: demo
title: Light7 Demo
---
<div id="bar-multi" class="page">
  <nav class="bar bar-nav bar-standard">
    <a class="button button-link button-nav pull-left back" href="/demos/bar">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Secondary Bar</h1>
  </nav>

  <!-- Block button in standard bar fixed below top bar -->
  <div class="bar bar-header-secondary">
    <button class="button button-block">Block level button</button>
  </div>

  <!-- Block button in standard bar fixed above the footer -->
  <div class="bar bar-footer-secondary">
    <button class="button button-block">Block level button</button>
  </div>

  <!-- Icons in standard bar fixed to the bottom of the screen -->
  <div class="bar bar-footer">
    <a class="icon icon-edit pull-left"></a>
    <a class="icon icon-settings pull-right"></a>
  </div>

  <div class="content">
    <div class="content-padded">
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
      <p>Some content Here...</p>
    </div>
  </div>
</div>