<div class="vd-teaser-list-striped">
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
<article class="d-flex
flex-column vd-teaser-list-striped-item px-3 pt-3">
<header class="d-flex flex-column">
<h3 class="mt-0 order-2">
<a href="communiques-presse-detail" class="vd-link-invisible">Lorem
ipsum dolor sit amet.</a>
</h3>
<p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>
<p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
<div class="order-2">
<p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
explicabo nesciunt.</p>
</div>
</article>
</div>
<nav class="vd-pagination" aria-label="Pagination">
<ul class="vd-pagination__list">
<li class="vd-pagination__item vd-pagination__item--previous">
<a href="#" class="vd-pagination__link">
<span class="vd-pagination__title">
<span class="fas fa-chevron-left" aria-hidden="true"></span>
Page précédente
</span><span class="sr-only">:</span>
<span class="vd-pagination__label">11 sur 244</span></a>
</li>
<li class="vd-pagination__item vd-pagination__item--next">
<a href="#" class="vd-pagination__link">
<span class="vd-pagination__title">
Page suivante
<span class="fas fa-chevron-right" aria-hidden="true"></span>
</span><span class="sr-only">:</span>
<span class="vd-pagination__label">13 sur 244</span></a>
</li>
</ul>
</nav>
<div class="vd-teaser-list-striped">
{% for i in range(0, 10) %}
{% render '@teaser-small--alt', {styleModifier:'vd-teaser-list-striped-item px-3 pt-3'}, true %}
{% endfor %}
</div>
{% render '@pagination' %}
/* No context defined. */
Add a background on odd elements.