Media object

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>