manyi/static/angular-mod/tpl/ui_portlet.html

<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">Portlet</h1>
</div>
<div class="wrapper-md">
  <div class="row">
    <div class="col-sm-6 connected" ui-jq="sortable" ui-options="{items:'.panel', handle:'.panel-heading', connectWith:'.connected'}">
      <div class="panel panel-info">
        <div class="panel-heading">
          Quick link
        </div>
        <div class="list-group bg-white">
          <a href class="list-group-item">
            <i class="fa fa-fw fa-envelope"></i> Inbox
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-eye"></i> Profile visits
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-phone"></i> Call
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-comments-o"></i> Messages
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-bookmark"></i> Bookmarks
          </a>
          <a href class="list-group-item">
            <i class="fa fa-fw fa-bell"></i> Notifications
          </a>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          News <span class="badge">32</span>                    
        </div>
        <div class="panel-body">
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-bold fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">                        
              <a href class="h4">Bootstrap 3: What you need to know</a>
              <small class="block m-t-xs">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</small>
              <em class="text-xs">Posted on <span class="text-danger">Feb 23, 2013</span></em>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x text-info"></i>
                <i class="fa fa-file-o fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">
              <a href class="h4">Bootstrap documents</a>
              <small class="block m-t-xs">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</small>
              <em class="text-xs">Posted on <span class="text-danger">Feb 12, 2013</span></em>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="pull-left">
              <span class="fa-stack fa-lg">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-mobile fa-stack-1x text-white"></i>
              </span>
            </div>
            <div class="media-body">
              <a href class="h4 text-success">Mobile first html/css framework</a>
              <small class="block m-t-xs">Bootstrap, Ratchet</small>
              <em class="text-xs">Posted on <span class="text-danger">Feb 05, 2013</span></em>
            </div>
          </article>
        </div>
      </div>
    </div>
    <div class="col-sm-6 connected" ui-jq="sortable" ui-options="{items:'.panel', handle:'.panel-heading', connectWith:'.connected'}">
      <div class="panel panel-success">
        <div class="panel-heading">
          Connection
        </div>
        <ul class="list-group alt">
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-success m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>Chris Fox</a></div>
                <small class="text-muted">about 2 minutes ago</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a2.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-muted m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>Amanda Conlan</a></div>
                <small class="text-muted">about 2 hours ago</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a3.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-warning m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>Dan Doorack</a></div>
                <small class="text-muted">3 days ago</small>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="media">
              <span class="pull-left thumb-sm"><img src="img/a4.jpg" alt="..." class="img-circle"></span>
              <div class="pull-right text-danger m-t-sm">
                <i class="fa fa-circle"></i>
              </div>
              <div class="media-body">
                <div><a href>Lauren Taylor</a></div>
                <small class="text-muted">about 2 minutes ago</small>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">                    
          <span class="label bg-dark">15</span> Inbox
        </div>
        <div class="panel-body">
          <article class="media">
            <span class="pull-left thumb-sm"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">12:18</strong><br>
                <small class="label bg-light">pm</small>
              </div>
              <a href class="h4">Bootstrap 3 released</a>
              <small class="block"><a href class="">John Smith</a> <span class="label label-success">Circle</span></small>
              <small class="block m-t-sm">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</small>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <span class="pull-left thumb-sm"><i class="fa fa-file-o fa-3x"></i></span>                
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">17</strong><br>
                <small class="label bg-light">feb</small>
              </div>
              <a href class="h4">Bootstrap documents</a>
              <small class="block"><a href class="">John Smith</a> <span class="label label-info">Friends</span></small>
              <small class="block m-t-sm">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</small>
            </div>
          </article>
          <div class="line pull-in"></div>
          <article class="media">
            <div class="media-body">
              <div class="pull-right text-center text-muted">
                <strong class="h4">09</strong><br>
                <small class="label bg-light">jan</small>
              </div>
              <a href class="h4 text-success">Mobile first html/css framework</a>
              <small class="block m-t-sm">Bootstrap, Ratchet</small>
            </div>
          </article>
        </div>
      </div>    
    </div>
  </div>
</div>