<h3>List default</h3>
<hr>
<div class="mb-3">
<ul class="list">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list--white">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>
<h3>List arrow large</h3>
<hr>
<div class="mb-3">
 <ul class="list list-arrow">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-arrow list-arrow--white">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>
<h3>List arrow small</h3>
<hr>
<div class="mb-3">
 <ul class="list list-arrow list-arrow--small">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-arrow list-arrow--small list-arrow--white">
   <li><a href=#>Réalisations et plans d'actions</a></li>
   <li><a href=#>Documents et rapports</a></li>
   <li><a href=#>Initiatives et engagements</a></li>
 </ul>
</div>