{% load wagtailimages_tags %}

<div class="col-sm-6 col-lg-4 mb-4" style="position: absolute; left: 0%; top: 0px;">
    <div class="card">
        {% if article.cover_image and self.show_covers %}
            {% image article.cover_image fill-900x600 as cover_image %}
            <a href="{{article.url}}" title="{{article.title}}"><img class="card-img-top" src="{{cover_image.url}}" alt="{{cover_image.title}}"></a>
        {% endif %}
        <div class="card-body">
            <h5 class="card-title">{{article.title}}</h5>
            <div class="card-subtitle mb-2 text-muted">
                {% if self.show_dates %}{{article.seo_published_at}}{% endif %}
                {% if article.seo_author and self.show_authors %} &bull; {{article.seo_author}}
                {% endif %}
            </div>
            <div class="card-subtitle mb-2 text-muted">{{article.caption}}</div>
            {% if self.show_preview %}
            <p class="card-text">{{article.body_preview}}</p>
            {% endif %}
            <a href="{{article.url}}" title="{{article.title}}">Read more &raquo;</a>
        </div>
    </div>
</div>
