---
layout: demo
title: Light7 Demo
---
<div id="page-modal" class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/demos">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Modal</h1>
  </header>
  <div class="content">
    <div class="content-padded">
      <p><a class="alert-text">Alert with Text</a></p>
      <p><a class="alert-text-title">Alert with text and title</a></p>
      <p><a class="alert-text-title-callback">Alert with Call back</a></p>
      <p><a class="confirm-ok">Confirm</a></p>
      <p><a class="prompt-ok">Prompt</a></p>
      <p><a class="show-toast">Toast</a></p>

      <p><a data-popover=".popover-links" class="open-popover">Show Popover</a></p>
    </div>
  </div>
</div>

<div class="popover popover-links">
  <div class="popover-angle"></div>
  <div class="popover-inner">
    <div class="list-block">
      <ul>
        <li><a href="#" class="list-button item-link">Link 1</a></li>
        <li><a href="#" class="list-button item-link">Link 2</a></li>
        <li><a href="#" class="list-button item-link">Link 3</a></li>
        <li><a href="#" class="list-button item-link">Link 4</a></li>
      </ul>
    </div>
  </div>
</div>