Media Objects

Documentation and examples for Thedir's media object to construct highly repetitive components like blog comments, and the like.

Media object #1 #

Author 1
Great place and very love it!
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!

Review 1 Review 2 Review 3
8
Author 2
Delicious & Fast Support
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! 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!

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 #

02 Comments

Daniel Vandaft

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
Daniel Vandaft
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
Daniel Vandaft
Comment example here. Nulla risus lacus, vehicula id mi vitae, auctor accumsnulla.
Reply 
<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>