the left by default, but they can also anchor to the top, right, or bottom as well. Add the <code>position</code> attribute to your panel to define a direction.</p>

<div class="grid-block">
  <div class="small-12 medium-6 grid-content">
<hljs language="html">
<div zf-panel position="top">
  <a zf-close class="close-button">&times;</a>
  <p>This is a top panel.</p>
</div>
</hljs>
  </div>
  <div class="small-12 medium-6 grid-content">
    <a zf-toggle="example-panel-top" class="button">Top</a>
    <a zf-tog