<section>
<h2 class="vd-heading-light-alt h4">Agenda et événements</h2>
<ul class="list-unstyled">
<li class="d-flex flex-column">
<h3 class="order-2 mt-1">
<a href="#">Ut condimentum magna a ornare pulvinar</a>
</h3>
<p class="order-1 mt-3 vd-bg-pattern-gray d-flex justify-content-center">
<span class="d-flex flex-column p-3">
<span class="text-center">du</span>
<span class="text-center my-1 h1">31</span>
<span class="text-center my-1">juillet</span>
</span>
<span class="d-flex flex-column p-3">
<span class="text-center">au</span>
<span class="text-center my-1 h1">1</span>
<span class="text-center my-1">août</span>
</span>
</p>
<p class="order-4">rem 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>
</li>
<li class="d-flex flex-column">
<h3 class="order-2 mt-1">
<a href="#">Etiam vehicula ligula nec convallis fringilla</a>
</h3>
<p class="order-1 mt-3 vd-bg-pattern-gray d-flex justify-content-center">
<span class="d-flex flex-column p-3">
<span class="text-center my-1 h1">24</span>
<span class="text-center my-1">novembre</span>
</span>
</p>
<figure class="figure order-3 vd-w-md-50">
<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">
</figure>
<p class="order-4">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>
</li>
<li class="d-flex flex-column">
<h3 class="order-2 mt-1">
<a href="#">Sed vitae magna eget enim condimentum aliquam semper sit amet velit</a>
</h3>
<p class="order-1 mt-3 vd-bg-pattern-gray d-flex justify-content-center">
<span class="d-flex flex-column p-3">
<span class="text-center my-1 h1">1</span>
<span class="text-center my-1">décembre</span>
</span>
</p>
<p class="order-4">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>
</li>
</ul>
</section>
<section>
<h2 class="vd-heading-light-alt h4">{{ title }}</h2>
<ul class="list-unstyled">
{% for event in events %}
<li class="d-flex flex-column">
<h3 class="order-2 mt-1">
<a href="{{ event.url }}">{{ event.title }}</a>
</h3>
<p class="order-1 mt-3 vd-bg-pattern-gray d-flex justify-content-center">
<span class="d-flex flex-column p-3">
{% if event.date.end %}<span class="text-center">du</span> {% endif %}
<span class="text-center my-1 h1">{{ event.date.start.day }}</span>
<span class="text-center my-1">{{ event.date.start.month }}</span>
</span>
{% if event.date.end %}
<span class="d-flex flex-column p-3">
<span class="text-center">au</span>
<span class="text-center my-1 h1">{{ event.date.end.day }}</span>
<span class="text-center my-1">{{ event.date.end.month }}</span>
</span>
{% endif %}
</p>
{% if event.image -%}
{% render '@figure', event.image, true %}
{%- endif %}
<p class="order-4">{{ event.excerpt }}</p>
</li>
{% endfor %}
</ul>
</section>
{
"title": "Agenda et événements",
"events": [
{
"title": "Ut condimentum magna a ornare pulvinar",
"url": "#",
"excerpt": "rem 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.",
"date": {
"start": {
"day": "31",
"month": "juillet"
},
"end": {
"day": "1",
"month": "août"
}
}
},
{
"title": "Etiam vehicula ligula nec convallis fringilla",
"url": "#",
"image": {
"styleModifier": "order-3 vd-w-md-50",
"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.",
"date": {
"start": {
"day": "24",
"month": "novembre"
}
}
},
{
"title": "Sed vitae magna eget enim condimentum aliquam semper sit amet velit",
"url": "#",
"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.",
"date": {
"start": {
"day": "1",
"month": "décembre"
}
}
}
]
}
No notes defined.