Media Objects
Documentation and examples for Front's media object to construct highly repetitive components like blog comments, tweets, and the like.
Media objects #1
At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.
It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.
<!-- Reviews -->
<div>
<!-- Author -->
<div class="media mb-3">
<div class="d-flex mr-3">
<img class="img-fluid u-md-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body align-self-center">
<h4 class="d-inline-block mb-1">
<a class="d-block h6 mb-0" href="#">Russel Fernandes</a>
</h4>
<ul class="list-inline text-warning small mb-0">
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star text-warning"></span>
</li>
</ul>
</div>
<div class="media-body text-right">
<small class="d-block text-muted">3 hours ago.</small>
</div>
</div>
<!-- End Author -->
<p>At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.</p>
<!-- Likes/Reply -->
<ul class="list-inline d-flex">
<li class="list-inline-item">
<a class="text-secondary" href="#">
17
<span class="far fa-thumbs-up ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-3">
<a class="text-secondary" href="#">
0
<span class="far fa-thumbs-down ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-auto">
<a class="text-secondary" href="#">
<span class="far fa-comments mr-1"></span>
Reply
</a>
</li>
</ul>
<!-- End Likes/Reply -->
</div>
<!-- End Reviews -->
<hr class="my-7">
<!-- Reviews -->
<div class="mb-7">
<!-- Author -->
<div class="media mb-3">
<div class="d-flex mr-3">
<img class="img-fluid u-md-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body align-self-center">
<h4 class="d-inline-block mb-1">
<a class="d-block h6 mb-0" href="#">Elizabeth Lord</a>
</h4>
<ul class="list-inline text-warning small mb-0">
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fa fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="far fa-star text-warning"></span>
</li>
</ul>
</div>
<div class="media-body text-right">
<small class="d-block text-muted">1 day ago.</small>
</div>
</div>
<!-- End Author -->
<p>It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
<!-- Likes/Reply -->
<ul class="list-inline d-flex">
<li class="list-inline-item">
<a class="text-secondary" href="#">
17
<span class="far fa-thumbs-up ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-3">
<a class="text-secondary" href="#">
0
<span class="far fa-thumbs-down ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-auto">
<a class="text-secondary" href="#">
<span class="far fa-comments mr-1"></span>
Reply
</a>
</li>
</ul>
<!-- End Likes/Reply -->
</div>
<!-- End Reviews -->
<a class="btn btn-block u-btn-primary--air transition-3d-hover" href="#">See More</a>
Media objects #2
Russel Fernandes
3 hours ago.Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.
Elizabeth Lord
1 day ago.As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.
<!-- Comments -->
<div>
<!-- Author -->
<div class="media mb-3">
<div class="d-flex mr-3">
<img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-1">
<a class="d-block h6 mb-0" href="#">Russel Fernandes</a>
</h4>
<small class="d-block text-muted">3 hours ago.</small>
</div>
</div>
<!-- End Author -->
<p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>
<!-- Likes/Reply -->
<ul class="list-inline d-flex">
<li class="list-inline-item">
<a class="text-secondary" href="#">
17
<span class="far fa-thumbs-up ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-3">
<a class="text-secondary" href="#">
0
<span class="far fa-thumbs-down ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-auto">
<a class="text-secondary" href="#">
<span class="far fa-comments mr-1"></span>
Reply
</a>
</li>
</ul>
<!-- End Likes/Reply -->
</div>
<!-- End Comments -->
<hr class="my-6">
<!-- Comments -->
<div class="mb-7">
<!-- Author -->
<div class="media mb-3">
<div class="d-flex mr-3">
<img class="img-fluid u-avatar rounded-circle" src="../assets/img/100x100/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-1">
<a class="d-block h6 mb-0" href="#">Elizabeth Lord</a>
</h4>
<small class="d-block text-muted">1 day ago.</small>
</div>
</div>
<!-- End Author -->
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
<!-- Likes/Reply -->
<ul class="list-inline d-flex">
<li class="list-inline-item">
<a class="text-secondary" href="#">
17
<span class="far fa-thumbs-up ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-3">
<a class="text-secondary" href="#">
0
<span class="far fa-thumbs-down ml-1"></span>
</a>
</li>
<li class="list-inline-item ml-auto">
<a class="text-secondary" href="#">
<span class="far fa-comments mr-1"></span>
Reply
</a>
</li>
</ul>
<!-- End Likes/Reply -->
</div>
<!-- End Comments -->
<a class="btn btn-block u-btn-primary--air transition-3d-hover" href="#">Load More</a>