Media Objects
Documentation and examples for Thedir's media object to construct highly repetitive components like blog comments, and the like.
Media object #1 #
Great place and very love it!
- by Ron Weasley
- |
- 15 hours ago
5.0
Excellent
This place is the epitome of an amazing college town diner! Badger decor, huge portions, completely affordable, hearty meals and awesome service!
12
8
Delicious & Fast Support
- by Anna Molly
- |
- 17 hours ago
This place is the epitome of an amazing college town diner! Badger decor, huge portions, completely affordable, hearty meals and awesome service! The ambiance is very chill and comfy. Just moved to Thai’s Taste and already went here twice (two days in a row) because there's really nothing like this place. It's going to be hard to find another place like this in regards to service, taste, portions & price! My husband and I will definitely be regulars here!
5
3
<div class="reviews">
<div class="py-6 media border-top">
<a href="#" class="author-image">
<img src="../images/listing/jobs-testimonial-1.png"
alt="Author 1" class="rounded-circle">
</a>
<div class="media-body">
<div class="mb-4 row flex-md-nowrap mb-5">
<div class="col-12 col-md-10">
<div class="h5 mb-1">Great place and very love it!
</div>
<ul class="list-inline text-gray">
<li class="list-inline-item">
<span>by</span>
<a href="#">Ron Weasley</a>
</li>
<li class="list-inline-item">
<span>|</span>
</li>
<li class="list-inline-item">
<span>15 hours ago</span>
</li>
</ul>
</div>
<div class="ml-0 ml-md-auto text-left text-md-right col-12 col-md-2 mt-2 mt-md-0">
<span class="badge badge-success d-inline-block font-size-h5 font-weight-semibold">5.0</span>
<span class="text-dark font-weight-semibold font-size-md d-block">Excellent</span>
</div>
</div>
<p class="mb-0">This place is the epitome of an amazing
college
town diner! Badger decor, huge portions, completely
affordable,
hearty meals and awesome service!
</p>
<div class="images d-flex flex-wrap">
<img src="../images/listing/review-01.jpg" alt="Review 1"
class="mt-4">
<img src="../images/listing/review-02.jpg" alt="Review 2"
class="mt-4">
<img src="../images/listing/review-03.jpg" alt="Review 3"
class="mt-4">
</div>
<div class="icons d-flex mt-4">
<div class="mr-5 like">
<i class="fal fa-thumbs-up"></i>
12
</div>
<div class="love">
<i class="fal fa-heart"></i>
8
</div>
</div>
</div>
</div>
<div class="py-6 media border-top">
<a href="#" class="author-image">
<img src="../images/listing/review-athor-01.jpg"
alt="Author 2" class="rounded-circle">
</a>
<div class="media-body">
<div class="mb-4 row flex-md-nowrap mb-5">
<div class="col-12 col-md-10">
<div class="h5 mb-1">Delicious & Fast Support</div>
<ul class="list-inline d-flex text-gray">
<li class="list-inline-item">
<span>by</span>
<a href="#">Anna Molly </a>
</li>
<li class="list-inline-item">
<span>|</span>
</li>
<li class="list-inline-item">
<span>17 hours ago</span>
</li>
</ul>
</div>
<div class="rating ml-0 ml-md-auto text-left text-md-right col-12 col-md-2 mt-2 mt-md-0">
<span class="badge badge-success d-inline-block font-size-h5 font-weight-semibold">5.0</span>
<span class="text-dark font-weight-semibold font-size-md d-block">Excellent</span>
</div>
</div>
<p class="mb-0">This place is the epitome of an amazing
college
town diner! Badger decor, huge portions, completely
affordable,
hearty meals and awesome service! The ambiance is very
chill
and
comfy. Just moved to Thai’s Taste and already went here
twice (two
days in a row) because there's really nothing like this
place. It's
going to be hard to find another place like this in
regards
to
service, taste, portions & price! My husband and I will
definitely
be regulars here!
</p>
<div class="icons d-flex mt-4">
<div class="like mr-5">
<i class="fal fa-thumbs-up"></i>
5
</div>
<div class="love">
<i class="fal fa-heart"></i>
3
</div>
</div>
</div>
</div>
</div>
Media object #2 #
<div class="comments mb-9 mt-11">
<div class="h4 mb-6 text-center">02 Comments</div>
<div class="media mb-6">
<a href="#" class="image d-inline-block mr-4"><img
src="images/blog/single-gallery-comment-1.jpg"
alt="Daniel Vandaft"></a>
<div class="media-body border-top px-3">
<ul class="list-inline pt-3 mb-3">
<li class="list-inline-item mr-0">
<a href="#"
class="link-hover-dark-primary font-weight-semibold d-inline-block mr-1">Daniel
Vandaft </a>
</li>
<li class="list-inline-item mr-0">
<span class="font-weight-semibold">-</span>
</li>
<li class="list-inline-item">
<span class="text-uppercase"> Jul 17,2015 at 15 hours ago</span>
</li>
</ul>
<p class="mb-3">Comment example here. Nulla risus lacus, vehicula id mi
vitae, auctor accumsan nulla.
Sed a mi quam. Lorem In euismod urna ac massa adipiscing interdum.
</p>
<a href="#form-comment" class="action anchorjs-link">Reply</a>
</div>
</div>
<div class="media mb-6">
<a href="#" class="image"><img src="images/blog/single-gallery-comment-2.jpg"
alt="Daniel Vandaft"></a>
<div class="media-body border-top px-3">
<ul class="list-inline pt-3 mb-3">
<li class="list-inline-item mr-0">
<a href="#"
class="link-hover-dark-primary font-weight-semibold d-inline-block mr-1">Vannessa Elina</a>
</li>
<li class="list-inline-item mr-0"><span class="font-weight-bold">-</span></li>
<li class="list-inline-item mr-0"><span class="text-uppercase"> Jul 17,2015 at 15 hours ago</span>
</li>
</ul>
<div class="mb-3">Comment example here. Nulla risus lacus, vehicula id mi
vitae, auctor accumsan nulla.
Sed a
mi quam. Lorem In euismod urna ac massa adipiscing interdum.
</div>
<a href="#form-comment" class="action anchorjs-link">Reply</a>
</div>
</div>
<div class="sub-comment">
<div class="media">
<a href="#" class="image d-inline-block mr-3"><img
src="images/blog/single-gallery-comment-1.jpg"
alt="Daniel Vandaft"></a>
<div class="media-body px-3">
<ul class="list-inline pt-3 mb-3">
<li class="list-inline-item mr-0">
<a href="#"
class="link-hover-dark-primary font-weight-semibold d-inline-block mr-1">Daniel
Vandaft </a>
</li>
<li class="list-inline-item mr-0">
<span class="font-weight-semibold">-</span>
</li>
<li class="list-inline-item">
<span class="text-uppercase"> Jul 17,2015 at 15 hours ago</span>
</li>
</ul>
<div class="mb-3">Comment example here. Nulla risus lacus, vehicula
id mi vitae, auctor accumsnulla.
</div>
<a href="#form-comment" class="action anchorjs-link">Reply</a>
</div>
</div>
</div>
</div>
02 Comments
Comment example here. Nulla risus lacus, vehicula id mi vitae, auctor accumsan nulla. Sed a mi quam. Lorem In euismod urna ac massa adipiscing interdum.
Reply