<div class="grid-frame vertical">
  <!-- Header -->
  <div class="grid-block shrink">
    <p>Header</p>
  </div>
  <!-- /Header -->

  <!-- Body -->
  <div class="grid-block">
    <!-- Sidebar -->
    <div class="small-2 grid-block">
      <p>Sidebar</p>
    </div>
    <!-- /Sidebar -->

    <!-- List view -->
    <div class="small-5 grid-block vertical">
      <!-- List view header -->
      <div class="grid-block shrink">
        <p>Header</p>
      </div>
      <!-- /List view header -->

      <!-- List view items -->
      <div class="grid-block">
        <ul>
          <li>List</li>
          <li>List</li>
          <li>List</li>
          <li>List</li>
        </ul>
      </div>
      <!-- /List view items -->
    </div>
    <!-- /List view -->

    <!-- Detail view -->
    <div class="small-5 grid-block vertical">
      <!-- Detail view tabs -->
      <div class="grid-block shrink">
        <fa-tabs id="tabs" displaced="true">
          <fa-tab title="Tab One">
            Tab One
          </fa-tab>
          <fa-tab title="Tab Two">
            Tab Two
          </fa-tab>
        </fa-tabs>
      </div>
      <!-- /Detail view tabs -->

      <!-- Detail view message -->
      <div class="grid-block">
        <fa-tab-content target="tabs"></fa-tab-content>
      </div>
      <!-- /Detail view message -->
    </div>
    <!-- /Detail view -->
  </div>
  <!-- /Body -->
</div>