<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="sr-only">Publié par </span><a href="#" rel="author" title="Les articles de Clark Kent">Clark Kent</a>, <a href="#" rel="author" title="Les articles de Bruce Wayne">Bruce Wayne</a>, <a href="#" rel="author" title="Les articles de Cédric Aellen">Cédric Aellen</a> et <a href="#" rel="author" title="Les articles de Cinzia Pfeiffer">Cinzia Pfeiffer</a>,
<span class="sr-only"> le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
— <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
</p>
</header>
<figure class="figure">
<a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 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>
<p>
<a href="#">Lire la suite<span class="sr-only"> de l'article Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></a>
</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="sr-only">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="sr-only">{% if not authors %}Publié {% endif %} {{ datePreText }}</span>{%- render '@time', date, true -%}
{%- if categories -%} — <span class="sr-only">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="sr-only"> de l'article {{ title }}</span></a>
</p>
{% endif %}
</article>
{
"title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
"url": "#",
"media": {
"url": "#",
"caption": false
},
"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.",
"authors": [
{
"url": "#",
"name": "Clark Kent"
},
{
"url": "#",
"name": "Bruce Wayne"
},
{
"url": "#",
"name": "Cédric Aellen"
},
{
"url": "#",
"name": "Cinzia Pfeiffer"
}
],
"datePreText": "le ",
"date": {
"text": "31.03.2017",
"attributs": [
{
"name": "datetime",
"value": "2017-03-31T13:05:23+00:00"
},
{
"name": "pubdate"
}
]
},
"categories": [
{
"name": "Accessibilité",
"url": "#"
},
{
"name": "Agriculture",
"url": "news-list--categories"
},
{
"name": "Tourisme",
"url": "#"
}
],
"readMore": "Lire la suite"
}