---
layout : 'default'
css    : 'hotfix'

title  : 'Test Page'
type   : 'Library'
---
<%- @partial('header') %>

<!-- TEST JS HERE !-->
<script>
$(document).ready(function() {
  $('.button')
      .popup({
          on: 'click',
          inline: true,
          preserve: true
      })
  ;
});
</script>

<!-- TEST CSS HERE !-->
<style type="text/css">
.wide.popup {
  max-width: 500px;
  padding: 0em;
}
</style>


<div class="main container">

  <!-- TEST HTML HERE !-->
  <div class="ui button">Trigger Popup</div>
  <div class="ui popup">
    <div class="header">Hello World</div>
    <div class="content">My custom content</div>
  </div>

  <div class="ui button">Trigger Wide Popup</div>
  <div class="ui wide popup">
    <div class="ui four column center aligned divided grid">
      <div class="column">
        <div class="ui selection list">
            <a class="item">1</a>
            <a class="item">2</a>
            <a class="item">3</a>
            <a class="item">4</a>
            <a class="item">5</a>
            <a class="item">6</a>
            <a class="item">7</a>
        </div>
      </div>
      <div class="column">
        <div class="ui selection list">
            <a class="item">1</a>
            <a class="item">2</a>
            <a class="item">3</a>
            <a class="item">4</a>
            <a class="item">5</a>
            <a class="item">6</a>
            <a class="item">7</a>
        </div>
      </div>
      <div class="column">
        <div class="ui selection list">
            <a class="item">1</a>
            <a class="item">2</a>
            <a class="item">3</a>
            <a class="item">4</a>
            <a class="item">5</a>
            <a class="item">6</a>
            <a class="item">7</a>
        </div>
      </div>
      <div class="column">
        <div class="ui selection list">
            <a class="item">1</a>
            <a class="item">2</a>
            <a class="item">3</a>
            <a class="item">4</a>
            <a class="item">5</a>
            <a class="item">6</a>
            <a class="item">7</a>
        </div>
      </div>
    </div>
  </div>
</div>
</body>