How do I create latest blog listings with photos?

[jrr24]

I was wondering if any body could help me? 

I am updating my companies blog page and although most of it is how we would like I cannot seem to create a section at the top of our blog listing page showing our 3 latest blog posts with featured images. 

I have managed to create a list version of this which automatically updates, but am unable to link the photos with it, especially in a block of three as shown below in our design mock ups. 

Does anyone know a way I can do this as I can only seem to show it in a list format and we would like to preview our latest blogs?

Thank you in advance for any help!

[prosa · Accepted solution]

you need a custom module to pull the recent blog post using HUBL

{% set rec_posts = blog_recent_posts('default', module.number_of_blog_post) %}

Then use a for loop to walk the array and display the results

 {% for post in rec_posts %}
    	<div class="post-section">
        <div class="post-date">{{ post.publish_date |datetimeformat('%B %e, %Y') |upper}}</div>
        <h3 class="post-title"><a href="{{post.url}}">{{ post.name }}</a></h3>
        <p>{{ post.post_summary }}</p>
        <hr style="margin:0 20% ; border-color:#3b8531">
    	</div>
{% endfor %}