<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>
 <h3>List check</h3>
<hr>
<div class="mb-3">
 <ul class="list list-check">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check Default</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check list-check--white">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check white</a></li>
 </ul>
</div>
<div class="mb-3">
 <ul class="list list-check list-check--fresh">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check fresh</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check list-check--fresh-white">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check fresh white</a></li>
 </ul>
</div>
  <div class="mb-3">
 <ul class="list list-check list-check--northbox">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check northbox</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check list-check--northbox-white">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check northbox white</a></li>
 </ul>
</div>
 <div class="mb-3">
 <ul class="list list-check list-check--protect">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check protect</a></li>
 </ul>
</div>
  <div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check list-check--protect-white">
   <li><a href=#>List check</a></li>
   <li><a href=#>Check protect white</a></li>
 </ul>
</div>
  <h3>List check small</h3>
<hr>
<div class="mb-3">
 <ul class="list list-check--small">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check Default small</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check--small list-check--white">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check white small</a></li>
 </ul>
</div>
<div class="mb-3">
 <ul class="list list-check--small list-check--fresh">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check fresh small</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check--small list-check--fresh-white">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check fresh white small</a></li>
 </ul>
</div>
  <div class="mb-3">
 <ul class="list list-check--small list-check--northbox">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check northbox small</a></li>
 </ul>
</div>
<div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check--small list-check--northbox-white">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check northbox white small</a></li>
 </ul>
</div>
 <div class="mb-3">
 <ul class="list list-check--small list-check--protect">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check protect small</a></li>
 </ul>
</div>
  <div class="mb-3 p-4 bg-bleu-emeraude">
 <ul class="list list-check--small list-check--protect-white">
   <li><a href=#>List check small</a></li>
   <li><a href=#>Check protect white small</a></li>
 </ul>
</div>
Weight: 1
                          

                            <div class="mb-3">
  <button type="button" class="btn btn-primary">Lorem ipsum</button>
  &nbsp;
  <button type="button" class="btn btn-secondary">Lorem ipsum</button>
  &nbsp;
  <a href=# target="_blank" class="btn btn-secondary">Lorem ipsum</a>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-primary btn-lg">Lorem ipsum</button>
     &nbsp;
  <button type="button" class="btn btn-secondary btn-lg">Lorem ipsum</button>
</div>
<div class="mb-3 d-flex">
  <div class="pr-2">
  <span class="text-large font-weight-bold text-primary d-block">Fond Transparent</span>
  <button type="button" class="btn btn-outline-primary">Lorem ipsum</button>
  </div>
  &nbsp;
  <div>
  <span class="text-large font-weight-bold text-primary d-block">Fond Blanc</span>
  <button type="button" class="btn btn-light btn-outline-primary">Lorem ipsum</button>
  </div>
   &nbsp;
  <div>
  <span class="text-large font-weight-bold text-primary d-block">Fond Transparent et Texte Blanc</span>
  <button type="button" class="btn btn-outline-light">Lorem ipsum</button>
  </div>
</div>
<h3>Nouveaux boutons</h3>
<div class="mb-3">
  <button type="button" class="btn btn-rouge-rouille">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-rouge-rouille ml-2">Lorem ipsum</button>
</div>
 <div class="mb-3">
  <button type="button" class="btn btn-vert-pale">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-vert-pale ml-2">Lorem ipsum</button>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-menthe">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-menthe ml-2">Lorem ipsum</button>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-bleu-profond">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-bleu-profond ml-2">Lorem ipsum</button>
</div>
 <div class="mb-3">
  <button type="button" class="btn btn-secondary">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-secondary ml-2">Lorem ipsum</button>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-orange">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-orange ml-2">Lorem ipsum</button>
</div>
 <div class="mb-3">
  <button type="button" class="btn btn-vert-pomme">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-vert-pomme ml-2">Lorem ipsum</button>
</div>
<h3>Boutons soulignés</h3>
<div class="mb-3">
  <button type="button" class="btn btn-underline-primary">Lorem ipsum</button>
     <button type="button" class="btn btn-underline-primary active ml-2">Lorem ipsum</button>
</div>
 <div class="mb-3">
  <button type="button" class="btn btn-underline-secondary">Lorem ipsum</button>
     <button type="button" class="btn btn-underline-secondary active ml-2">Lorem ipsum</button>
</div>
                          

                            <h1 class="heading-xlarge px-3">Social Responsibility at Cascades</h1>
<div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="heading-xlarge">Social Responsibility at Cascades</p>
</div>
<h2 class="heading-large px-3">Social Responsibility at Cascades</h2>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="heading-large">Social Responsibility at Cascades</p>
</div>
<h3 class="heading-medium px-3">Social Responsibility at Cascades</h3>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="heading-medium">Social Responsibility at Cascades</p>
</div>
<h4 class="heading-regular px-3">Social Responsibility at Cascades</h4>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="heading-regular">Social Responsibility at Cascades</p>
</div>
<h5 class="heading-small px-3">Social Responsibility at Cascades</h5>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="heading-small">Social Responsibility at Cascades</p>
</div>
                          

                            <i class="icon-menu">&nbsp;</i>
<i class="icon-home">&nbsp;</i>
<i class="icon-close">&nbsp;</i>
<i class="icon-search">&nbsp;</i>
<i class="icon-arrow-right">&nbsp;</i>
<i class="icon-arrow-large-right">&nbsp;</i>
<i class="icon-arrow-big-right">&nbsp;</i>
<i class="icon-arrow-small-right">&nbsp;</i>
<i class="icon-external-link">&nbsp;</i>
<i class="icon-facebook">&nbsp;</i>
<i class="icon-instagram">&nbsp;</i>
<i class="icon-twitter">&nbsp;</i>
<i class="icon-youtube">&nbsp;</i>
<i class="icon-linkedin">&nbsp;</i>
<i class="icon-email">&nbsp;</i>
<i class="icon-email-send">&nbsp;</i>
<i class="icon-phone">&nbsp;</i>
<i class="icon-close-large">&nbsp;</i>
<i class="icon-plus">&nbsp;</i>
<i class="icon-equalizer">&nbsp;</i>
<i class="icon-clock">&nbsp;</i>
<i class="icon-reset">&nbsp;</i>
<i class="icon-email-send icon-adaptative--small">&nbsp;</i>
<i class="icon-phone icon-adaptative--small">&nbsp;</i>
<i class="icon-email-send icon-adaptative">&nbsp;</i>
<i class="icon-phone icon-adaptative">&nbsp;</i>
<i class="icon-email-send icon-adaptative--large">&nbsp;</i>
<i class="icon-phone icon-adaptative--large">&nbsp;</i>
                          

                            <div class="mb-3">
  <a href=# target="_blank" class="link link--small-arrow">Lorem ipsum</a>
</div>
                          

                            <h2>Text sizes</h2>
<p class="text-huge px-3">Social Responsibility at Cascades - text-huge</p>
<div class="bg-bleu-emeraude text-bleu-pastel px-3 py-2 mb-5">
  <p class="text-huge">Social Responsibility at Cascades</p>
</div>
<p class="text-xlarge px-3">Social Responsibility at Cascades - text-xlarge</p>
<div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="text-xlarge mb-0">Social Responsibility at Cascades</p>
</div>
<p class="text-large px-3">Social Responsibility at Cascades - text-large</p>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="text-large mb-0">Social Responsibility at Cascades</p>
</div>
<p class="text-regular px-3">Social Responsibility at Cascades - text-regular</p>
<div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="text-regular mb-0">Social Responsibility at Cascades</p>
</div>
<p class="text-small px-3">Social Responsibility at Cascades - text-small</p>
 <div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <p class="text-small mb-0">Social Responsibility at Cascades</p>
</div>
<h2>Text colors</h2>
<p class="text-large text-vert-cascades px-3">Social Responsibility at Cascades - text-vert-cascades</p>
<p class="text-large text-vert-pale px-3">Social Responsibility at Cascades - text-vert-pale</p>
<p class="text-large text-vert-lime px-3">Social Responsibility at Cascades - text-vert-lime</p>
<p class="text-large text-vert-pomme px-3">Social Responsibility at Cascades - text-vert-pomme</p>
<p class="text-large text-bleu-recyclage px-3">Social Responsibility at Cascades - text-blue-recyclage</p>
<p class="text-large text-bleu-emeraude px-3">Social Responsibility at Cascades - text-bleu-emeraude</p>
<p class="text-large text-bleu-profond px-3">Social Responsibility at Cascades - text-bleu-profond</p>
<p class="text-large text-bleu-pastele px-3">Social Responsibility at Cascades - text-bleu-pastele</p>
<p class="text-large text-menthe px-3">Social Responsibility at Cascades - text-menthe</p>
<p class="text-large text-rouge-rouille px-3">Social Responsibility at Cascades - text-rouge-rouille</p>
<p class="text-large text-orange px-3">Social Responsibility at Cascades - text-orange</p>
<p class="text-large text-creme px-3">Social Responsibility at Cascades - text-creme</p>
<p class="text-large text-sable px-3">Social Responsibility at Cascades - text-sable</p>
<p class="text-large text-gris-chaud px-3">Social Responsibility at Cascades - text-gris-chaud</p>
<p class="text-large text-noir px-3">Social Responsibility at Cascades - text-noir</p>
<p class="text-large text-tundora px-3">Social Responsibility at Cascades - text-tundora</p>
<p class="text-large text-silver px-3">Social Responsibility at Cascades - text-silver</p>
<p class="text-large text-alto px-3">Social Responsibility at Cascades - text-alto</p>
<p class="text-large text-gallery px-3">Social Responsibility at Cascades - text-gallery</p>
<p class="text-large text-alabaster px-3">Social Responsibility at Cascades - text-alabaster</p>
<p class="text-large text-aqua px-3">Social Responsibility at Cascades - text-aqua</p>
<p class="text-large text-jaune px-3">Social Responsibility at Cascades - text-jaune</p>
<div class="bg-bleu-emeraude px-3 py-2 mb-5">
  <p class="text-large text-blanc mb-0">Social Responsibility at Cascades - text-blanc</p>
</div>
<div class="bg-vert-cascades px-3 py-2 mb-5">
  <p class="text-huge text-bleu-pastel mb-0">Social Responsibility at Cascades - text-bleu-pastel</p>
</div>
<h2>Text tools</h2>
<div class="px-3 py-2 mb-5">
  <p class="text-hyphens">You can use the class <em>text-hyphens</em> when a word is too long for your content width.</p>
</div>
<h2> Marque de commerce et marque déposée </h2>
<div> Marque de commerce small <span class="sup-small">MC</span> </div>
<div> Marque de commerce large <span class="sup-large">MD</span></div>
                          

                            <h3>Head infos</h3>
<hr>
<div class="py-2 mb-2">
  <div class="head-infos"><span>News</span> March 30th, 2014</div>
</div>
<div class="bg-bleu-emeraude text-white px-3 py-2 mb-5">
  <div class="head-infos head-infos--blanc"><span>News</span> March 30th, 2014</div>
</div>
<h3>Text underline</h3>
<hr>
<div class="py-2 mb-2">
  <p class="heading-regular text-underline text-underline--green">Title</p>
</div>
<div class="bg-bleu-emeraude px-3 py-2 mb-5">
  <p class="heading-regular text-blanc text-underline">Title</p>
</div>