<!– Title –> <hr> <p class=“font-weight-bold dark-grey-text text-center spacing”>

<strong>RELATED POSTS</strong>

</p> <hr> <!– Section: Recent posts –> <section class=“section mb-5”>

{% for post in site.related_posts reversed  limit:5%}

 <div class="post-border">

     <!-- Grid row -->
     <div class="row mt-4">

         <!-- Grid column -->
         <div class="col-5">

             <!-- Image -->
             <div class="view overlay z-depth-1 mb-3">
                 <img src="{{ post.image | default: "https://mdbootstrap.com/img/Photos/Others/photo12.jpg }}" class="img-fluid" alt="Post">
                 <a>
                     <div class="mask rgba-white-slight"></div>
                 </a>
             </div>

         </div>
         <!-- Grid column -->

         <!-- Second column -->
         <div class="col-7 mb-1">

             <!-- Post data -->
             <div class="">
                 <p class="mb-1">
                     <a href="{{post.url}}" class="text-hover font-weight-bold">{{ post.title | truncatewords: 3, '...' }}</a>
                 </p>
                 <p class="font-small grey-text">
                     <em>July 22, 2017</em>
                 </p>
             </div>

         </div>
         <!-- Second column -->

     </div>
     <!-- Grid row -->

 </div>
 {% endfor %}

</section> <!– Section: Recent posts –>