Media Objects

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

Media objects #1

Result
HTML

Reviews (125)

Russel Fernandes

3 hours ago.

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>

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>