div>
    </div>
  </div>
</div>

<hr>

<h3>Additional Options</h3>
<p>To use custom content in the button, place the HTML mark up in between the custom zf tags.</p>

<hljs>
<zf-action-sheet id="my-actionsheet">
  <zf-as-button><span class="fancy-button">I'm Fancy!</span></zf-as-button>
  <zf-as-content position="top">
    <p>This is my fancy content!</p>
  </zf-as-content>
</zf-action-sheet>
</hljs>

<zf-action-sheet id="my-actionsheet">
  <zf-as-button><button class="button fancy-button">I'm Fancy!</button