Elements

Lists

List default

List arrow large

List arrow small

List check

List check small

Weight: 1

Markup Details

                            <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

Buttons

btn btn-primary

Fond Transparent

Fond Blanc

Fond Transparent et Texte Blanc

btn btn-vert-pale

Boutons modifiés

btn btn-orange (#F89844)

btn btn-vert-sauge (#7EA88B)

Nouveau boutons

btn btn-lime (#C8DC5F)

btn btn-ancre (#5A422F)

btn btn-temporel (#B18E62)

btn btn-expertise (#20294E)

btn btn-espoir (#8AC2C5)

btn btn-bleu-emeraude (#2A8B9A)

Boutons soulignés

Markup Details

                            <div class="mb-3">
  <button type="button" class="btn btn-primary">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-primary</span>
</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>
<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>
  &nbsp;
  <span class="text-small">btn btn-vert-pale</span>
</div>
<h3>Boutons modifiés</h3>
<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>
  &nbsp;
  <span class="text-small">btn btn-orange (#F89844)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-vert-sauge">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-vert-sauge ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-vert-sauge (#7EA88B)</span>
</div>
<h3>Nouveau boutons</h3>
<div class="mb-3">
  <button type="button" class="btn btn-vert-lime">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-vert-lime ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-lime (#C8DC5F)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-ancre">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-ancre ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-ancre (#5A422F)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-temporel">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-temporel ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-temporel (#B18E62)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-expertise">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-expertise ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-expertise (#20294E)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-espoir">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-espoir ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-espoir (#8AC2C5)</span>
</div>
<div class="mb-3">
  <button type="button" class="btn btn-bleu-emeraude">Lorem ipsum</button>
  <button type="button" class="btn btn-outline-bleu-emeraude ml-2">Lorem ipsum</button>
  &nbsp;
  <span class="text-small">btn btn-bleu-emeraude (#2A8B9A)</span>
</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>

Headings

Social Responsibility at Cascades

Markup Details

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

Icons

Markup Details

                            <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-check">&nbsp;</i>
<i class="icon-external-mail">&nbsp;</i>
<i class="icon-external-files">&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>

Links

Lorem ipsum

Markup Details

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