Media Object
Click to preview the Media Object demo. View demo
Left media list
Code:
html
<ul class="media-list media-hover">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img01.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Forthright time line</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img02.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Uncluttered layout</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img03.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Organized extension</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>
<ul class="media-list media-hover text-right">
<li class="media">
<div class="media-body">
<h6 class="media-heading">Upgrade on a regular basis</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></a> </div>
</li>
<li class="media">
<div class="media-body">
<h6 class="media-heading">Elaborate documentation</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></a> </div>
</li>
<li class="media">
<div class="media-body">
<h6 class="media-heading">Extension with tons of potential</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></a> </div>
</li>
</ul>Right media list
Code:
html
<ul class="media-list media-hover media-border">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img07.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Forthright time line</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img08.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Completely rebuilt from ground up</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img09.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Different home versions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>Left bordered list
Code:
html
<ul class="media-list media-hover media-border text-right">
<li class="media">
<div class="media-body">
<h6 class="media-heading">Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img10.jpg" class="img-circle" alt=""></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 malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img11.jpg" class="img-circle" alt=""></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 malesuada velit. </div>
<div class="media-right"> <a href="#"><img src="/portals/13/Features-Images/media-img12.jpg" class="img-circle" alt=""></a> </div>
</li>
</ul>Right bordered list
Code:
html
<ul class="media-list">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img01.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Forthright time line</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<ul class="media-list">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img02.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Uncluttered layout</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img03.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Organized extension</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>
</div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Large elements libary</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<ul class="media-list">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Completely rebuilt from ground up</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Different home versions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>
</div>
</li>
</ul>Annotation text
Code:
html
<ul class="media-list media-hover">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img01.jpg" class="img-circle" alt=""></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 malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img02.jpg" class="img-circle" alt=""></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 malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img03.jpg" class="img-circle" alt=""></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 malesuada velit. </div>
</li>
</ul>Left inline
Code:
html
<ul class="media-list media-hover ">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading"> <span class="media-info right"> 8 hours ago</span>Upgrade on a regular basis</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading"> <span class="media-info right"> Yesterday, 12:18</span>Elaborate documentation</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading"> <span class="media-info right"> November 12, 2016</span>Extension with tons of potential</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>Right inline
Code:
html
<ul class="media-list media-hover">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img07.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Large elements libary</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<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 src="/portals/13/Features-Images/media-img08.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Completely rebuilt from ground up</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<div class="media-info"><span class="fa fa-map-marker"></span> Yesterday from Canada</div>
</div>
</li>
</ul>Text block
Code:
html
<ul class="media-list media-hover ">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img09.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<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 src="/portals/13/Features-Images/media-img10.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">Building the feature</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit.
<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>Other examples
Code:
html
<ul class="media-list media-hover">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img01.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">
<div class="dropdown dropright right">
<div type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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>
Forthright time line</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img02.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">
<div class="dropdown dropright right">
<div type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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>
Uncluttered layout</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img03.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading">
<div class="dropdown dropright right">
<div type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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>
Organized extension</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>Icon, icon list or dropdown
Code:
html
<ul class="media-list media-hover ">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></a> <a href="#"><span class="badge bg-accent media-badge">8</span></a></div>
<div class="media-body">
<h6 class="media-heading">Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></a> <a href="#"><span class="badge bg-danger media-badge">6</span></a></div>
<div class="media-body">
<h6 class="media-heading">Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></a> <a href="#"><span class="badge bg-success media-badge">5</span></a></div>
<div class="media-body">
<h6 class="media-heading">Building the feature</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>Other examples
Code:
html
<ul class="media-list media-hover ">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading"><span class="label bg-accent right mt-10 mr-10">Default</span>Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"><a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></a></div>
<div class="media-body">
<h6 class="media-heading"><span class="label bg-primary right mt-10 mr-10">Primary</span>Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"><a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></a> </div>
<div class="media-body">
<h6 class="media-heading"><span class="label bg-success right mt-10 mr-10">Success</span>Building the feature</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>Labels
Code:
html
<ul class="media-list media-hover ">
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img04.jpg" class="img-circle" alt=""></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>Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img05.jpg" class="img-circle" alt=""></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> Extensive functions</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
<li class="media">
<div class="media-left"> <a href="#"><img src="/portals/13/Features-Images/media-img06.jpg" class="img-circle" alt=""></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>Building the feature</h6>
Lorem ipsum dolamet, consectetur adipiscing elit aesent amet malesuada velit. </div>
</li>
</ul>