Media Object Layout

The traditional multimedia object that is used to build components in social network interfaces, such as blog comments, post and similar, but useful in any context.



eFrolic | framework css 2018
Efrain Peralta @EfraaX

3h 路

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<article class="e-media">
  <img class="mr-3" src="./image.png" style="max-width:65px;">
  <div class="e-media-body">
    <div class="between mb-3">
      <h5 class="no-my">Efrain Peralta <small class="text-normal">@EfraaX</small></h5>
      <a class="no-m text-gray"><i class="fas fa-ellipsis-h"></i></a>
      <p class="no-m w-100">3h 路 <i class="fas fa-globe-americas"></i></p>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit magna aliqua.
  </div>
</article>
Nesting

You can nest as many elements as you want.


eFrolic | framework css 2018
Efrain Peralta @EfraaX

3h 路

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
eFrolic | framework css 2018
Efrain Peralta @EfraaX
Lorem ipsum dolor sit amet, consectetur adipisicing elit dolore magna aliqua. LikeReply 路 3 hrs
eFrolic | framework css 2018
Efrain Peralta @EfraaX
Lorem ipsum dolor sit amet, consectetur adipisicing elit dolore magna aliqua. LikeReply 路 3 hrs
eFrolic | framework css 2018
Efrain Peralta @EfraaX
<div class="e-media">
  <img class="mr-3" src="./image.png" style="max-width:65px;">
  <div class="e-media-body">
    <div class="between mb-3">
      <h5 class="no-my">Efrain Peralta <small class="text-normal">@EfraaX</small></h5>
      <a class="no-m text-gray"><i class="fas fa-ellipsis-h"></i></a>
      <p class="no-m w-100">3h 路 <i class="fas fa-globe-americas"></i></p>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit commodo consequat.
    <div class="e-media mt-3">
      <a class="pr-3" href="#">
        <img src="./image.png" style="max-width:65px;">
      </a>
      <div class="e-media-body">
        <h5 class="no-mt">Efrain Peralta <small class="text-normal">@EfraaX</small></h5>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit dolore magna aliqua.
        <small class="d-block"><a>Like</a><a>Reply</a> 路 3 hrs</small>
      </div>
    </div>
    <div class="e-media mt-3">
      <a class="pr-3" href="#">
        <img src="./image.png" style="max-width:65px;">
      </a>
      <div class="e-media-body">
        <h5 class="no-mt">Efrain Peralta <small class="text-normal">@EfraaX</small></h5>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit dolore magna aliqua.
        <small class="d-block"><a>Like</a><a>Reply</a> 路 3 hrs</small>
      </div>
    </div>
  </div>
</div>
<div class="e-media mt-2">
  <img class="mr-3" src="./image.png" style="max-width:65px;">
  <div class="e-media-body">
    <div class="between mb-3">
      <h5 class="no-my">Efrain Peralta <small class="text-normal">@EfraaX</small></h5>
      <a class="no-m text-gray"><i class="fas fa-ellipsis-h"></i></a>
    </div>
    <textarea class="e-control" placeholder="Add a comment..."></textarea>
    <div class="e-buttons align-end mt-3">
      <button type="button" class="e-btn small inverted">Cancel</button>
      <button type="button" class="e-btn small primary">Post</button>
    </div>
  </div>
</div>
Media object within cards

You can nest as many elements as you want.


eFrolic | framework css 2018
Efrain Peralta @EfraaX

10 hrs 路

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ullamco laboris nisi ut aliquip commodo.
eFrolic | framework css 2018
<div class="e-card">
  <div class="card-body">
    <div class="e-media">
      <img class="mr-3 border circle" src="./image.png" style="max-width:65px;">
      <div class="e-media-body">
        <div class="between mb-3">
          <h5 class="no-my text-primary">Efrain Peralta <small class="text-normal text-gray">@EfraaX</small></h5>
          <a class="no-m text-gray"><i class="fas fa-ellipsis-h"></i></a>
          <p class="no-m w-100">10 hrs 路 <i class="fas fa-globe-americas"></i></p>
        </div>
      </div>
    </div>
    <div class="my-3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <img src="https://bit.ly/2RKe9kO" />
    <div class="e-buttons align-end">
      <a class="e-btn inverted">Cancel</a>
      <a class="e-btn primary">Post</a>
    </div>
  </div>
</div>
Media object within lists

You can nest as many elements as you want.


<ul class="e-list">
  <div class="e-container-fluid primary p-3 text-bold">
    Contributors
  </div>
  <li class="e-list-item">
    <div class="e-media">
      <img class="mr-3 circle" src="./image.png" style="max-width:65px;">
      <div class="e-media-body">
        <div class="between mb-3">
          <h5 class="no-my text-primary">Efrain Peralta <small class="text-normal text-gray">@EfraaX</small></h5>
          <a class="no-m text-gray"><i class="fab fa-github-alt"></i></a>
          <a href="#" class="no-m w-100 text-gray">efrolicss.com 路 <i class="fas fa-globe-americas"></i></a>
        </div>
      </div>
    </div>
  </li>
  <!-- List item x3 -->
</ul>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron