<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-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>