<article role="article" aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit">
<header>
<h3><a class="vd-link-invisible" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h3>
<p class="small">
<span class="visually-hidden">Publié </span><time datetime="2017-03-31T13:05:23+00:00">31.03.2017</time>
</p>
</header>
<figure class="figure vd-w-md-50">
<a href="#"><img class="img-fluid" src="/assets/img/picture-960x640.jpg" srcset="../../assets/img/picture-320x213.jpg 320w, ../../assets/img/picture-540x360.jpg 540w, ../../assets/img/picture-720x480.jpg 720w, ../../assets/img/picture-960x640.jpg 960w, ../../assets/img/picture-1140x760.jpg 1140w" alt="Alternative text">
</a>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
</p>
</article>
<article role="article" aria-label="{{ title }}"{% if styleModifier %} class="{{ styleModifier }}"{% endif %}>
<header>
<h3><a class="vd-link-invisible" href="{{ url }}">{{ title }}</a></h3>
<p class="small">
{% if authors -%}<span class="visually-hidden">Publié par </span>
{%- for author in authors -%}{% if author.url %}<a href="#" rel="author" title="Les articles de {{ author.name }}">{% endif %}{{ author.name }}{% if author.url %}</a>{% endif -%}
{%- if loop.revindex == 2 %} et {% elseif loop.last %}{% else %}, {% endif %}
{%- endfor %},
{% endif -%}
<span class="visually-hidden">{% if not authors %}Publié {% endif %} {{ datePreText }}</span>{%- render '@time', date, true -%}
{%- if categories -%} — <span class="visually-hidden">Catégorie: </span>
{%- for category in categories -%}{% if category.url %}<a href="#" rel="category" title="Les articles de la categorie {{ category.name }}">{% endif %}{{ category.name }}{% if category.url %}</a>{% endif -%}
{%- if loop.revindex == 2 %} et {% elseif loop.last %}{% else %}, {% endif %}
{%- endfor %}
{% endif -%}
</p>
</header>
{% if media %}
{% render '@figure', media, true %}
{% endif %}
{% if excerpt %}
<p>
{{ excerpt | truncate(450) }}
</p>
{% endif %}
{% if readMore %}
<p>
<a href="{{ url }}">{{ readMore }}<span class="visually-hidden"> de l'article {{ title }}</span></a>
</p>
{% endif %}
</article>
{
"title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
"url": "#",
"media": {
"url": "#",
"caption": false,
"styleModifier": "vd-w-md-50"
},
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia."
}