Media Objects
Documentation and examples for Front's media object to construct highly repetitive components like blog comments, and the like.
Media objects #1
Reviews (125)
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.
<!-- Title -->
<div id="reviews" class="mb-3">
<h3 class="h4 mb-0">Reviews <span class="text-muted font-size-1">(125)</span></h3>
</div>
<!-- End Title -->
<!-- Reviews -->
<div>
<!-- Author -->
<div class="media mb-3">
<img class="u-avatar rounded-circle mr-3" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
<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="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas 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">
<img class="u-avatar rounded-circle mr-3" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
<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="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas fa-star"></span>
</li>
<li class="list-inline-item mx-0">
<span class="fas 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 btn-soft-primary transition-3d-hover" href="#">See More</a>
Media objects #2
25 Comments
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 Section -->
<div class="container space-2 space-md-3">
<div class="w-lg-60 mx-auto">
<!-- Header -->
<header class="row justify-content-between align-items-center">
<div class="col-6">
<h4 class="h6 mb-0">25 Comments</h4>
</div>
<div class="col-6 col-sm-4 col-md-3">
<select class="custom-select w-auto border-0">
<option selected>Sort by</option>
<option value="comments1">Top comments</option>
<option value="comments2">Newest first</option>
</select>
</div>
</header>
<!-- End Header -->
<hr class="mt-2 mb-6">
<!-- Comments -->
<div>
<!-- Author -->
<div class="media mb-3">
<div class="u-avatar mr-3">
<img class="img-fluid 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="u-avatar mr-3">
<img class="img-fluid 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 btn-soft-primary transition-3d-hover" href="#">Load More</a>
</div>
</div>
<!-- End Comments Section -->
Media objects #3
Reviews
4.7
(39 reviews)
4.6
Communication level
4.8
Recommend to a friend
5.0
Service as described
I need a front-end developer for a project.
Jorge delivered on all fronts. Superb developer, he goes over and above in most cases to make sure the job is done and done well. He has the right skill set for a developer and more importantly he aligns himself with the vision of the product and provides great insights on how to build a product the right way. Will look forward to work with him on more projects. Thanks Jorge.
Maria Muszynska
5.0
June 2018 - Aug 2018
E-commerce app development.
Jorge was a joy to work with. Excellent results and all-around attitude.
Brus V.
5.0
Nov 2018
Building a personal website!
Elite front-end developer. One of the best I have worked with so far.
Gradiella Mayer
5.0
Dec 2018
<div class="d-sm-flex justify-content-sm-between align-items-sm-center border-bottom pb-5 mb-5">
<div class="d-flex align-items-center mb-2 mb-sm-0">
<h4 class="h5 mb-0">Reviews</h4>
<!-- Review -->
<div class="text-warning ml-3">
<small class="fas fa-star"></small>
<span class="font-weight-semi-bold align-middle">4.7</span>
<span class="text-muted align-middle">(39 reviews)</span>
</div>
<!-- End Review -->
</div>
<!-- Select -->
<select class="js-select selectpicker dropdown-select"
data-width="fit"
data-style="btn-soft-secondary btn-xs">
<option value="showCategoryByFilterSelect1" selected>Newest first</option>
<option value="showCategoryByFilterSelect2">Highest rated</option>
<option value="showCategoryByFilterSelect3">Lowest rated</option>
</select>
<!-- End Select -->
</div>
<div class="border-bottom pb-5 mb-5">
<div class="row">
<!-- Review -->
<div class="col-sm-4 mb-3 mb-sm-0">
<div class="text-warning">
<small class="fas fa-star"></small>
<span class="font-weight-semi-bold align-middle">4.6</span>
</div>
<h5 class="small text-secondary mb-0">Communication level</h5>
</div>
<!-- End Review -->
<!-- Review -->
<div class="col-sm-4 mb-3 mb-sm-0">
<div class="text-warning">
<small class="fas fa-star"></small>
<span class="font-weight-semi-bold align-middle">4.8</span>
</div>
<h5 class="small text-secondary mb-0">Recommend to a friend</h5>
</div>
<!-- End Review -->
<!-- Review -->
<div class="col-sm-4">
<div class="text-warning">
<small class="fas fa-star"></small>
<span class="font-weight-semi-bold align-middle">5.0</span>
</div>
<h5 class="small text-secondary mb-0">Service as described</h5>
</div>
<!-- End Review -->
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<!-- Testimonial -->
<div class="mb-4">
<h4 class="h6">I need a front-end developer for a project.</h4>
<p>Jorge delivered on all fronts. Superb developer, he goes over and above in most cases to make sure the job is done and done well. He has the right skill set for a developer and more importantly he aligns himself with the vision of the product and provides great insights on how to build a product the right way. Will look forward to work with him on more projects. Thanks Jorge.</p>
</div>
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Maria Muszynska</h4>
<!-- Review -->
<div class="small mb-4">
<span class="text-warning">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<span class="font-weight-semi-bold ml-2">5.0</span>
<span class="text-muted">June 2018 - Aug 2018</span>
</div>
<!-- End Review -->
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="border-bottom pb-5 mb-5">
<!-- Testimonial -->
<div class="mb-4">
<h4 class="h6">E-commerce app development.</h4>
<p>Jorge was a joy to work with. Excellent results and all-around attitude.</p>
</div>
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Brus V.</h4>
<!-- Review -->
<div class="small mb-3">
<span class="text-warning">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<span class="font-weight-semi-bold ml-2">5.0</span>
<span class="text-muted">Nov 2018</span>
</div>
<!-- End Review -->
</div>
</div>
<!-- End Testimonial -->
</div>
<div class="border-bottom pb-5 mb-5">
<!-- Testimonial -->
<div class="mb-3">
<h4 class="h6">Building a personal website!</h4>
<p>Elite front-end developer. One of the best I have worked with so far.</p>
</div>
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-1">Gradiella Mayer</h4>
<!-- Review -->
<div class="small mb-3">
<span class="text-warning">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<span class="font-weight-semi-bold ml-2">5.0</span>
<span class="text-muted">Dec 2018</span>
</div>
<!-- End Review -->
</div>
</div>
<!-- End Testimonial -->
</div>
<button type="button" class="btn btn-block btn-soft-primary transition-3d-hover">Load More</button>
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.selectpicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
});
</script>
Media objects #4
77%
of customers recommend this product
Sort on
I jus love it!
I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.
Hailey
- Verified Purchase
Really nice
Material is great and the hat is comfortable and stylish.
David
- Verified Purchase
A really well built cap. It looks great and wears just as well. A great staple in ball caps.
Chrizelle
- Verified Purchase
<!-- Review Section -->
<div class="container">
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<div class="border-bottom pb-4 mb-4">
<!-- Overall Rating Stats -->
<div class="card border-0 bg-primary text-white p-4 mb-3">
<div class="d-flex justify-content-center align-items-center">
<span class="display-4 font-weight-semi-bold">4.7</span>
<div class="ml-3">
<div class="small">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
</div>
<span class="font-weight-normal"><strong>287</strong> reviews</span>
</div>
</div>
</div>
<!-- End Overall Rating Stats -->
<h3 class="h4">Rating breakdown</h3>
<!-- Ratings -->
<ul class="list-unstyled">
<li class="py-1">
<a class="row align-items-center mx-gutters-2 font-size-1" href="javascript:;">
<div class="col-3">
<span class="text-dark">5 stars</span>
</div>
<div class="col-7">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right">
<span class="text-secondary">205</span>
</div>
</a>
</li>
<li class="py-1">
<a class="row align-items-center mx-gutters-2 font-size-1" href="javascript:;">
<div class="col-3">
<span class="text-dark">4 stars</span>
</div>
<div class="col-7">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right">
<span class="text-secondary">55</span>
</div>
</a>
</li>
<li class="py-1">
<a class="row align-items-center mx-gutters-2 font-size-1" href="javascript:;">
<div class="col-3">
<span class="text-dark">3 stars</span>
</div>
<div class="col-7">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right">
<span class="text-secondary">23</span>
</div>
</a>
</li>
<li class="py-1">
<a class="row align-items-center mx-gutters-2 font-size-1" href="javascript:;">
<div class="col-3">
<span class="text-dark">2 stars</span>
</div>
<div class="col-7">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right">
<span class="text-secondary">0</span>
</div>
</a>
</li>
<li class="py-1">
<a class="row align-items-center mx-gutters-2 font-size-1" href="javascript:;">
<div class="col-3">
<span class="text-dark">1 stars</span>
</div>
<div class="col-7">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right">
<span class="text-secondary">4</span>
</div>
</a>
</li>
</ul>
<!-- End Ratings -->
</div>
<span class="d-block display-4 font-weight-medium">77%</span>
<p class="small">of customers recommend this product</p>
</div>
<div class="col-lg-8">
<div class="pl-lg-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h5 text-secondary font-weight-normal mb-0">Sort on</h3>
<!-- Select -->
<select class="js-select selectpicker dropdown-select"
data-size="10"
data-width="fit"
data-style="btn-soft-secondary btn-xs">
<option value="mostRecent" selected>Most recent</option>
<option value="relevant">Relevant</option>
<option value="helpful">Helpful</option>
<option value="newest">Newest</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Title -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-secondary font-size-1 mb-3">
<div class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span>April 3, 2019</span>
</div>
<!-- End Review Rating -->
<h4 class="h6 font-weight-semi-bold text-uppercase">I jus love it!</h4>
<p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
<!-- Reviewer -->
<div class="text-secondary font-size-1 mb-2">
<strong class="text-dark">Hailey</strong>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">Yes</a>
<span class="text-secondary">(45)</span>
</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">No</a>
<span class="text-secondary">(21)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-secondary font-size-1 mb-3">
<div class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span>January 19, 2019</span>
</div>
<!-- End Review Rating -->
<h4 class="h6 font-weight-semi-bold text-uppercase">Really nice</h4>
<p>Material is great and the hat is comfortable and stylish.</p>
<!-- Reviewer -->
<div class="text-secondary font-size-1 mb-2">
<strong class="text-dark">David</strong>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">Yes</a>
<span class="text-secondary">(2)</span>
</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">No</a>
<span class="text-secondary">(0)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-secondary font-size-1 mb-3">
<div class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</div>
<span>December 21, 2018</span>
</div>
<!-- End Review Rating -->
<p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
<!-- Reviewer -->
<div class="text-secondary font-size-1 mb-2">
<strong class="text-dark">Chrizelle</strong>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">Yes</a>
<span class="text-secondary">(0)</span>
</span>
<span class="ml-2">
<a class="link-muted" href="javascript:;">No</a>
<span class="text-secondary">(0)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<div class="d-sm-flex justify-content-sm-end">
<a class="btn btn-soft-primary btn-pill transition-3d-hover px-5 mb-2 mr-3" href="#">Read More</a>
<button type="button" class="btn btn-primary btn-pill transition-3d-hover px-5 mb-2">Write a Review</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Review Section -->
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.selectpicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
});
</script>