smileyj68

<li class="has-flyout">
  <a href="#">Nav Item 4</a>
  <a href="#" class="flyout-toggle"><span> </span></a>
  <div class="flyout large right">
    <h5>Large Dropdown</h5>
    <div class="row">
      <div class="eight columns">
        <p>This is example text.</p>
      </div>
      <div class="four columns">

smileyj68

<div class="row">
  <div class="five columns">
    <label class="error">Field with Error</label>
    <input type="text" class="error" />
    <small class="error">Invalid entry</small>
  </div>
  
  <div class="five columns end error">
    <label>Another Error</label>
    <input type="text" />

smileyj68

<div class="flex-video">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
</div>

<div class="flex-video widescreen">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
</div>

<div class="flex-video widescreen vimeo">
  <iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

smileyj68

<div class="row display">
  <div class="three mobile-one columns">
    .three.mobile-one.columns
  </div>
  <div class="nine mobile-three columns">
    .nine.mobile-three.columns
  </div>
</div>

smileyj68

<!-- Foundation 2 Forms -->
<form>
  <label>Form Input</label>
  <input type="text" class="input-text medium" />
</form>

<!-- Foundation 3 Forms -->
<form class="row">
  <div class="six columns">
    <label>Form Input</label>

smileyj68

<!-- Foundation 2 Buttons -->
<a href="#" class="large nice blue radius button">Fancy Button</a>
<a href="#" class="small nice green rounded button">Fancy Button</a>

<!-- Foundation 3 Buttons -->
<a href="#" class="large radius button">Fancy Button</a>
<a href="#" class="small success rounded button">Fancy Button</a>

smileyj68

<!-- Foundation 2 Structure -->
<div class="container">
  <div class="row">
    <div class="six columns">
    <div class="six columns">
  </div>
</div>

<!-- Foundation 3 Structure -->
<div class="row">

smileyj68

<dl class="tabs pill">
  <dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
  <dd><a href="#pillTab2">Pill Tab 2</a></dd>
  <dd><a href="#pillTab3">Pill Tab 3</a></dd>
</dl>

smileyj68

<kbd>Cmd</kbd>

smileyj68

<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>