<div class="padding">
  <div class="row">
    <div class="col-sm-6">
      <p>Basic</p>
      <div class="list box">
        <div class="list-item">
          <div class="list-left">
            <img src="../assets/images/a0.jpg" class="w-40 circle">
          </div>
          <div class="list-body">
            <a href class="_500">Consectetur adipiscing elit.</a>
            <small class="block text-muted">Min Li Chan</small>
          </div>
        </div>
        <div class="list-item">
          <div class="list-left">
            <img src="../assets/images/a1.jpg" class="w-40 circle">
          </div>
          <div class="list-body">
            <a href class="_500">Dipiscing elit.</a>
            <small class="block text-muted">Peter send you a message</small>
          </div>
        </div>
      </div>
      <p>Divider inset</p>
      <div class="list inset box">
        <div class="list-item">
          <div class="list-left">
            <span class="w-40 avatar">
              <img src="../assets/images/a3.jpg">
              <i class="away b-white"></i>
            </span>
          </div>
          <div class="list-body">
            <a href class="_500">Consectetur adipiscing elit.</a>
            <small class="block text-muted">Min Li Chan</small>
          </div>
        </div>
        <div class="list-item">
          <div class="list-left">
            <span class="w-40 avatar">
              <img src="../assets/images/a4.jpg">
              <i class="on bottom b-white"></i>
            </span>
          </div>
          <div class="list-body">
            <a href class="_500">Dipiscing elit.</a>
            <small class="block text-muted">Peter send you a message</small>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Text &amp; Icon</p>
      <div class="box">
        <ul class="list inset m-0">
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle accent">
                <i class="fa fa-envelope"></i>
              </span>
            </a>
            <div class="list-body">
              <div><a href>Chris Fox</a></div>
              <small class="text-muted text-ellipsis">Designer, Blogger</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle green">
                <i class="fa fa-comment"></i>
              </span>
            </a>
            <div class="list-body">
              <div><a href>Mogen Polish</a></div>
              <small class="text-muted text-ellipsis">Writter, Mag Editor</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle purple avatar">
                <span>J</span>
                <i class="busy b-white"></i>
              </span>
            </a>
            <div class="list-body">
              <div><a href>Joge Lucky</a></div>
              <small class="text-muted text-ellipsis">Art director, Movie Cut</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle danger avatar">
                <span>F</span>
                <i class="off b-danger"></i>
              </span>
            </a>
            <div class="list-body">
              <div><a href>Folisise Chosielie</a></div>
              <small class="text-muted text-ellipsis">Musician, Player</small>
            </div>
          </li>
          <li class="list-item">
            <a herf class="list-left">
              <span class="w-40 circle warning avatar">
                <span>P</span>
                <i class="on b-white"></i>
              </span>
            </a>
            <div class="list-body">
              <div><a href>Peter</a></div>
              <small class="text-muted text-ellipsis">Musician, Player</small>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <p class="m-0 m-b">Title and Ellipsis</p>
      <ul class="list-group m-b">
        <li class="list-group-item">
          <div class="block _500">This is title</div>
        </li>
        <li class="list-group-item active">
          <a href class="block _500">Title and link</a>
          <span class="text-muted">Morbi id neque quam</span>
        </li>
        <li class="list-group-item">
          <a href>
            <span class="block _500">Title and description link</span>
            <span class="text-muted">Aliquam sollicitudin venenatis ipsum</span>
          </a>
        </li>
        <li class="list-group-item">
          <a href><span class="block _500">Ellipsis description</span></a>
          <span class="clear text-ellipsis text-muted">Vestibulum ullamcorper sodales nisi nec condimentum Aliquam sollicitudin venenatis ipsum</span>
        </li>
      </ul>
      <p class="m-0 m-b">Link and Background</p>
      <div class="list-group info m-b">
        <a href class="list-group-item justify-content-between">
          Consectetur adipiscing elit.
          <span><i class="glyphicon glyphicon-chevron-right"></i></span>
        </a>
        <a href class="list-group-item justify-content-between">
          Lorem ipsum dolor sit amet
          <span><i class="glyphicon glyphicon-chevron-right"></i></span>
        </a>
        <a href class="list-group-item justify-content-between">
          Ullamcorper solli citudin venenatis ipsum 
          <span><i class="glyphicon glyphicon-chevron-right"></i></span>
        </a>
        <a href class="list-group-item justify-content-between">
          Aliquam sodales nisi nec condimentum
          <span><i class="glyphicon glyphicon-chevron-right"></i></span>
        </a>
        <a href class="list-group-item justify-content-between">
          Mauris at pellentesque
          <span><i class="glyphicon glyphicon-chevron-right"></i></span>
        </a>
      </div>
      <p class="m-0 m-b">Border</p>
      <div class="list-group m-b">
        <a href class="list-group-item justify-content-between b-l-primary">
          Border left primary
          <span class="text-primary"><i class="fa fa-circle text-xs"></i></span>
        </a>
        <a href class="list-group-item justify-content-between b-l-warning">
          Border left warning
          <span class="text-warning"><i class="fa fa-circle text-xs"></i></span>
        </a>
        <a href class="list-group-item justify-content-between b-l-success">
          Border left success
          <span class="text-success"><i class="fa fa-circle text-xs"></i></span>
        </a>
        <a href class="list-group-item justify-content-between b-l-danger">
          Border left danger
          <span class="text-danger"><i class="fa fa-circle text-xs"></i></span>
        </a>
        <a href class="list-group-item justify-content-between b-l-info">
          Border left info
          <span class="text-info"><i class="fa fa-circle text-xs"></i></span>
        </a>
      </div>
      <p class="m-0 m-b">Medium</p>
      <div class="list-group list-group-md m-b">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
    </div>
    <div class="col-sm-6">
      <p class="m-0 m-b">Text and Label</p>
      <div class="list-group m-b">
        <a href class="list-group-item justify-content-between">
          Consectetur adipiscing elit.
          <span class="label info">12</span>
        </a>
        <a href class="list-group-item justify-content-between">
          Lorem ipsum dolor sit amet
          <span class="label success">5</span>
        </a>
        <a href class="list-group-item justify-content-between">
          Ullamcorper solli citudin venenatis ipsum 
          <span>
            <span class="label primary">4</span>
            <span class="text-muted ml-1"><i class="glyphicon glyphicon-chevron-right"></i></span>
          </span>
        </a>
        <a href class="list-group-item justify-content-between">
          Aliquam sodales nisi nec condimentum
          <span class="label danger">9</span>
        </a>
        <a href class="list-group-item justify-content-between">
          Mauris at pellentesque
          <span class="label warning">10</span>
        </a>
      </div>
      <p class="m-0 m-b">Alternative</p>
      <div class="list-group list-group-alt m-b">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item active">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
      <p class="m-0 m-b">Media</p>
      <ul class="list-group m-b">
        <li class="list-group-item">
          <a href class="pull-left w-40 m-r"><img src="../assets/images/a1.jpg" class="img-responsive img-circle"></a>
          <div class="clear">
            <a href class="_500 block">Jonathan Doe</a>
            <span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-40 m-r"><img src="../assets/images/a2.jpg" class="img-responsive img-circle"></a>
          <div class="clear">
            <a href class="_500 block">Jack Michale</a>
            <span class="text-muted">Sectetur adipiscing elit</span>
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-40 m-r"><img src="../assets/images/a3.jpg" class="img-responsive img-circle"></a>
          <div class="clear">
            <a href class="_500 block">Jessi</a>
            <span class="text-muted">Sectetur adipiscing elit</span>
          </div>
        </li>
        <li class="list-group-item">
          <a href class="pull-left w-40 m-r"><img src="../assets/images/a4.jpg" class="img-responsive img-circle"></a>
          <div class="clear">
            <a href class="_500 block">Sodake</a>
            <span class="text-muted">Vestibulum ullamcorper sodales nisi nec condimentum</span>
          </div>
        </li>
      </ul> 
      <p class="m-0 m-b">With Gap</p>
      <div class="list-group list-group-gap m-b">
        <a href class="list-group-item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
        </a>
        <a href class="list-group-item">
          Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugia
        </a>
        <a href class="list-group-item">
          Vestibulum ullamcorper sodales nisi nec condimentum
        </a>
        <a href class="list-group-item">
          Donec eleifend condimentum nisl eu consectetur. Integer eleifend
        </a>
        <a href class="list-group-item">
          Lectus arcu malesuada sem
        </a>
      </div>
    </div>
  </div>
</div>
