zurb-foundation-5/doc/pages/components/toolbar.html

Foundation 5 for npm (no code modification from original repo)

---
title: Toolbar
---

<h3 class="subheader">Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, earum, quas temporibus hic atque nobis. Et, consequatur, quos neque consectetur quo impedit ipsa voluptatibus! Natus, est, ex, in, neque dolores unde debitis ullam officiis molestias facere optio atque tempore rerum.</p>

<div class="toolbar label-bottom">
  <a class="tab">
    <div class="tab-content">
      <img src="img/test-image.png"></i><label>Evernote</label>
    </div>
  </a>
  <a class="tab">
    <div class="tab-content">
      <img src="img/test-image.png"><label>ZURB</label>
    </div>
  </a>
  <a class="tab">
    <div class="tab-content">
      <img src="img/test-image.png"></i><label>Reddit</label>
    </div>
  </a>
  <a class="tab">
    <div class="tab-content">
      <img src="img/test-image.png"><label>Xbox</label>
    </div>
  </a>
</div>

<p>Change the default orientation of the toolbar by adding a class of "vertical".</p>
<p>Change the orientation of the labels by adding a class of "label-right" or "label-bottom" to the toolbar element.</p>