<ul class="media-list media-hover"> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>
<ul class="media-list"> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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/0/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/0/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/0/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/0/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>
<ul class="media-list media-hover media-border"> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>
<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/0/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/0/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/0/pages-images/media-img12.jpg" /></a></div> </li> </ul>
<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/0/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/0/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/0/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/0/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/0/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/0/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>
<ul class="media-list media-hover "> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>
<ul class="media-list media-hover"> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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>
<ul class="media-list media-hover "> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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/0/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/0/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>
<ul class="media-list media-hover "> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>
<ul class="media-list media-hover "> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>
<ul class="media-list media-hover "> <li class="media"> <div class="media-left"><a href="#"><img alt="" class="img-circle" src="/Portals/0/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/0/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/0/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>