Media Objects

<ul class="media-list media-hover">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img01.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img02.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Uncluttered layout</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img03.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Organized extension</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

MULTIPLE LEVELS

<ul class="media-list">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <ul class="media-list">
        <li class="media">
          <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-02.jpg" /></a></div>
          <div class="media-body">
            <h6 class="media-heading">Uncluttered layout</h6>
            Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
        </li>
        <li class="media">
          <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-03.jpg" /></a></div>
          <div class="media-body">
            <h6 class="media-heading">Organized extension</h6>
            Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
        </li>
      </ul>
    </div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-04.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <ul class="media-list">
        <li class="media">
          <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-05.jpg" /></a></div>
          <div class="media-body">
            <h6 class="media-heading">Uncluttered layout</h6>
            Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
        </li>
        <li class="media">
          <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-06.jpg" /></a></div>
          <div class="media-body">
            <h6 class="media-heading">Organized extension</h6>
            Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
        </li>
        <li class="media">
          <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img13-07.jpg" /></a></div>
          <div class="media-body">
            <h6 class="media-heading">Extensive functions</h6>
            Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
        </li>
      </ul>
    </div>
  </li>
</ul>

LEFT BORDERED

<ul class="media-list media-hover media-border">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img07.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Large elements libary</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img08.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Completely rebuilt from ground up</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img09.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Different home versions</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

RIGHT MEDIA LIST

<ul class="media-list media-hover media-border text-right">
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img10.jpg" /></a></div>
  </li>
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Building the feature</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img11.jpg" /></a></div>
  </li>
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Multilingual ready</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img12.jpg" /></a></div>
  </li>
</ul>

RIGHT BORDERED LIST

<ul class="media-list media-hover text-right">
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img04.jpg" /></a></div>
  </li>
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Uncluttered layout</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img05.jpg" /></a></div>
  </li>
  <li class="media">
    <div class="media-body">
      <h6 class="media-heading">Organized extension</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
    <div class="media-right"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img06.jpg" /></a></div>
  </li>
</ul>

<ul class="media-list media-hover">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img01.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line <span class="media-info dotted"> 8 hours ago</span></h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img02.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Uncluttered layout <span class="media-info dotted"> Yesterday, 12:18 am</span></h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img03.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Organized extension <span class="media-info dotted"> November 12, 2016 at 1:38 pm</span></h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

RIGHT INLINE

<ul class="media-list media-hover ">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img04.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="media-info right"> 8 hours ago</span>Large elements libary</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img05.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="media-info right"> Yesterday, 12:18</span>Completely rebuilt from ground up</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img06.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="media-info right"> November 12, 2016</span>Different home versions</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

TEXT BLOCK

<ul class="media-list media-hover">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img07.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <div class="media-info"><span class="fa fa-clock-o"></span>  8 hours ago</div>
    </div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img08.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Uncluttered layout</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <div class="media-info"><span class="fa fa-map-marker"></span>  Yesterday from Canada</div>
    </div>
  </li>
</ul>

TEXT LIST

<ul class="media-list media-hover ">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img09.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Extensive functions</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <div class="media-info"><span class="fa fa-comments-o"></span>  15 Comments <span class="fa fa-heart-o ml-10"></span>   189 Likes</div>
    </div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img10.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Building the feature</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.
      <div class="media-info"><span class="fa fa-comments-o"></span>  15 Comments <span class="fa fa-heart-o ml-10"></span>   189 Likes</div>
    </div>
  </li>
</ul>

<ul class="media-list media-hover">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img01.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Forthright time line</h6>
      <div class="dropdown dropright right">
        <div aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"><span class="fa fa-gear"></span></div>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Send email   <span class="badge bg-primary">5</span></a></li>
          <li><a href="#">Reply   <span class="badge bg-warning">7</span></a></li>
          <li><a href="#">Delete   <span class="badge bg-info">3</span></a></li>
          <li class="divider"> </li>
          <li><a href="#">Share   <span class="badge bg-accent">6</span></a></li>
        </ul>
      </div>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img02.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Uncluttered layout</h6>
      <div class="dropdown dropright right">
        <div aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"><span class="fa fa-gear"></span></div>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Send email   <span class="badge bg-primary">1</span></a></li>
          <li><a href="#">Reply   <span class="badge bg-warning">2</span></a></li>
          <li><a href="#">Delete   <span class="badge bg-info">3</span></a></li>
          <li class="divider"> </li>
          <li><a href="#">Share   <span class="badge bg-accent">4</span></a></li>
        </ul>
      </div>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img03.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading">Organized extension</h6>
      <div class="dropdown dropright right">
        <div aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"><span class="fa fa-gear"></span></div>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Send email   <span class="badge bg-primary">6</span></a></li>
          <li><a href="#">Reply   <span class="badge bg-warning">6</span></a></li>
          <li><a href="#">Delete   <span class="badge bg-info">6</span></a></li>
          <li class="divider"> </li>
          <li><a href="#">Share   <span class="badge bg-accent">6</span></a></li>
        </ul>
      </div>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

OBJECT BADGES

<ul class="media-list media-hover ">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img04.jpg" /></a> <a href="#"><span class="badge bg-accent media-badge">8</span></a></div>
    <div class="media-body">
      <h6 class="media-heading">Large elements libary</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img05.jpg" /></a> <a href="#"><span class="badge bg-danger media-badge">6</span></a></div>
    <div class="media-body">
      <h6 class="media-heading">Completely rebuilt from ground up</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img06.jpg" /></a> <a href="#"><span class="badge bg-success media-badge">5</span></a></div>
    <div class="media-body">
      <h6 class="media-heading">Different home versions</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aesent amet.</div>
  </li>
</ul>

LABELS

<ul class="media-list media-hover ">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img04.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="label bg-accent right mt-10 mr-10">Default</span>Forthright time line</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img05.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="label bg-primary right mt-10 mr-10">Primary</span>Uncluttered layout</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img06.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><span class="label bg-success right mt-10 mr-10">Success</span>BOrganized extension</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
</ul>

BADGES

<ul class="media-list media-hover ">
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img04.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><a href="#"><span class="badge bg-info right mt-10 mr-10">32</span></a>Large elements libary</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img05.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><a href="#"><span class="badge bg-warning right mt-10 mr-10">28</span></a> Completely rebuilt from ground up</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
  <li class="media">
    <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/1/pages-images/media-img06.jpg" /></a></div>
    <div class="media-body">
      <h6 class="media-heading"><a href="#"><span class="badge bg-danger right mt-10 mr-10">22</span></a>Organized extension</h6>
      Lorem ipsum dolamet, consectetur adipiscing elit aese.</div>
  </li>
</ul>