<h1>h1. Rubrique</h1>
    <h2>h2. Rubrique</h2>
    <h3>h3. Rubrique</h3>
    <h4>h4. Rubrique</h4>
    <h5>h5. Rubrique</h5>
    <h6>h6. Rubrique</h6>
  

    <div>
      <h1 class="h1">h1. Rubrique</h1>
      <h1 class="h2">h2. Rubrique</h1>
      <h1 class="h3">h3. Rubrique</h1>
      <h1 class="h4">h4. Rubrique</h1>
      <h1 class="h5">h5. Rubrique</h1>
      <h1 class="h6">h6. Rubrique</h1>

      <h1 class="h1 font-sans-serif">h1. Rubrique</h1>
      <h1 class="h2 font-sans-serif">h2. Rubrique</h1>
      <h1 class="h3 font-sans-serif">h3. Rubrique</h1>
      <h1 class="h4 font-sans-serif">h4. Rubrique</h1>
      <h1 class="h5 font-sans-serif">h5. Rubrique</h1>
      <h1 class="h6 font-sans-serif">h6. Rubrique</h1>

      <h1 class="h6 font-sans-serif font-uppercase">h6. Titre en majuscules</h1>
      <h1 class="h4 font-sans-serif">h4. Titre en <em>italique</em></h1>
    </div>
  

    <div class="rte">
      <h2>h2. Titre en <em>italique</em></h2>
      <h3>h3. Rubrique</h3>
      <h4>h4. Rubrique</h4>
      <h5>h5. Rubrique</h5>
      <h6>h6. Rubrique</h6>
    </div>
  

    <p>Quand avez-vous écrit une lettre à un proche pour la dernière fois ? Ou un courriel simplement parce que vous avez <a href="#" title="lien de test">testé le lien</a>? Servez-vous une tasse de thé et FaceTime votre meilleur ami à l'autre bout du pays ou <strong>testez l'audace</strong> de l'autre côté de la rue. Et votre grand-mère pendant que vous y êtes. Proposez de faire des courses ou de tester les prescriptions <em>en italique</em> pour le couple de personnes âgées de votre immeuble lorsque vous allez chercher les vôtres. Tout le monde n'a pas un système immunitaire robuste ou un accès à des voitures ou des vélos, voyez où vous pouvez aider. Et pendant que vous y êtes, remerciez les caissiers et ceux qui remplissent les étagères - ils se mettent littéralement en danger pour s'assurer que ceux d'entre nous qui restent à la maison ont de la nourriture, des vitamines et du papier toilette. Un sourire et un remerciement peuvent faire beaucoup de chemin. Idem pour les médecins et les infirmières. Imaginez ce que sont leurs journées ces derniers temps. N'oubliez pas que la santé ne se limite pas à savoir si nous sommes malades ou non d'un virus. La santé est aussi une question de bien-être émotionnel et mental.</p>

    <p>La gentillesse est contagieuse. Répandons-la partout.</p>
  

    <div class="rte">
      <p>Quand avez-vous écrit une lettre à un proche pour la dernière fois ? Ou un courriel simplement parce que vous avez <a href="#" title="lien de test">testé le lien</a>? Servez-vous une tasse de thé et FaceTime votre meilleur ami à l'autre bout du pays ou <strong>testez l'audace</strong> de l'autre côté de la rue. Et votre grand-mère pendant que vous y êtes. Proposez de faire des courses ou de tester les prescriptions <em>en italique</em> pour le couple de personnes âgées de votre immeuble lorsque vous allez chercher les vôtres.</p>

      <blockquote>"Plein d'épices parfumées et un câlin nutritionnel sain de notre nouveau bouillon de légumes".</blockquote>

      <p>Tout le monde n'a pas un système immunitaire robuste ou un accès à des voitures ou des vélos, voyez où vous pouvez aider. Et pendant que vous y êtes, remerciez les caissiers et ceux qui remplissent les étagères - ils se mettent littéralement en danger pour s'assurer que ceux d'entre nous qui restent à la maison ont de la nourriture, des vitamines et du papier toilette. Un sourire et un remerciement peuvent faire beaucoup de chemin.</p>

      <ul>
        <li>Idem pour les médecins et les infirmières.</li>
        <li>Imaginez ce que sont leurs journées ces derniers temps.</li>
        <li>N'oubliez pas que la santé ne se limite pas à savoir si nous sommes malades ou non d'un virus. La santé est aussi une question de bien-être émotionnel et mental.</li>
      </ul>

      <p>La gentillesse est contagieuse. Répandons-la partout.</p>

      <ol>
        <li>Idem pour les médecins et les infirmières.</li>
        <li>Imaginez ce que sont leurs journées ces derniers temps.</li>
        <li>N'oubliez pas que la santé ne se limite pas à savoir si nous sommes malades ou non d'un virus. La santé est aussi une question de bien-être émotionnel et mental.</li>
      </ol>
    </div>
  

    <a href="#" class="btn">Bouton par défaut</a>
    <a href="#" class="btn btn--wide">Bouton large</a>
    <a href="#" class="btn btn--slim">Bouton Slim</a>
    <a href="#" class="btn btn--full-width">Bouton pleine largeur</a>

    <a href="#" class="btn btn--small">Bouton Petit</a>
    <a href="#" class="btn btn--large">Bouton Large</a>

    <a href="#" class="btn btn--secondary">Bouton Secondaire</a>
    <a href="#" class="btn btn--secondary btn--small">Bouton Secondaire + Bouton Petit</a>

    <a href="#" class="btn btn--tertiary">Bouton Tertiaire</a>
  

    // Definition List
    <dl class="list--definition">
      <dt>Définition Liste Titre</dt>
      <dd>Il s'agit d'une division de la liste des définitions.</dd>
      <dt>Définition Liste Titre</dt>
      <dd>Il s'agit d'une division de la liste des définitions.</dd>
    </dl>

    // Ordered List
    <ol class="list--number">
      <li>Liste Point 1</li>
      <li>Liste Point 2</li>
      <li>Liste Point 3</li>
    </ol>

    // Unordered List
    <ul class="list--bullet">
      <li>Liste Point 1</li>
      <li>Liste Point 2</li>
      <li>Liste Point 3</li>
    </ul>

     // Checkmark List
    <ul class="list--checkmark">
      <li>Liste Point 1</li>
      <li>Liste Point 2</li>
      <li>Liste Point 3</li>
    </ul>

  

    <table>
      <thead>
        <tr>
          <th>Commande ID</th>
          <th>Date de facturation</th>
          <th>Total</th>
          <th>Détails</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1232434</td>
          <td>23 septembre 2018</td>
          <td>$29.99</td>
          <td><a href="#">Voir les détails</a></td>
        </tr>
        <tr>
          <td>1232434</td>
          <td>23 septembre 2018</td>
          <td>$29.99</td>
          <td><a href="#">Voir les détails</a></td>
        </tr>
      </tbody>
    </table>
  

    <ul class="data-table">
      <li class="data-table__header">
        <div>Commande ID</div>
        <div>Date de facturation</div>
        <div>Total</div>
        <div>Détails</div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">23 septembre 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">Voir les détails</a></div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">23 septembre 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">Voir les détails</a></div>
      </li>
    </ul>
  

    <form class="form-vertical">
      <input type="text" id="text_field" placeholder="Champ de texte avec texte de remplacement...">

      <label for="text_field_2">Champ de texte</label>
      <input type="text" id="text_field_2">

      <label for="text_field_3">Champ de texte avec valeur</label>
      <input type="text" id="text_field_3" value="Value Here">

      <label for="text_area">Zone de texte</label>
      <textarea id="text_area" rows="6"></textarea>

      <label for="password">Mot de passe</label>
      <input type="password" name="password">
    </form>
  

    <form class="form-vertical">
      <label for="select_element">Sélectionnez un élément</label>
      <select name="select_element">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </form>
  

    <form class="form-vertical">
      <label for="radio_buttons">Boutons radio</label>
      <input type="radio" name="radio_button" value="radio_1" id="radio_1"><label for="radio_1">Radio 1</label>
      <input type="radio" name="radio_button" value="radio_2" id="radio_2"><label for="radio_2">Radio 2</label>
      <input type="radio" name="radio_button" value="radio_3" id="radio_3"><label for="radio_3">Radio 3</label>
    </form>
  

    <form class="form-vertical">
      <label for="checkboxes">Cases à cocher</label>
      <input type="checkbox" name="checkboxes" value="check_1" id="check_1"><label for="check_1">Case à cocher 1</label>
      <input type="checkbox" name="checkboxes" value="check_2" id="check_2"><label for="check_2">Case à cocher 2</label>
      <input type="checkbox" name="checkboxes" value="check_3" id="check_3"><label for="check_3">Case à cocher 3</label>
    </form>
  

    <div class="form-increment" data-quantity-change="">
      <button data-action="dec" type="button"><span class="visually-hidden">Diminuer</span></button>
      <input id="form-increment-1" name="form-increment" type="tel" value="1" min="0">
      <button data-action="inc" type="button"><span class="visually-hidden">Augmenter</span></button>
    </div>
  

    <ul class="accordion" data-accordion="">
      <li class="accordion__tab">
        <button aria-expanded="false" class="accordion__heading" type="button" data-accordion-button="">Caractéristiques</button>
        <div aria-hidden="true" class="accordion__content" data-accordion-content="">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
        </div>
      </li>
      <li class="accordion__tab">
        <button aria-expanded="false" class="accordion__heading" type="button" data-accordion-button="">Utilise</button>
        <div aria-hidden="true" class="accordion__content" data-accordion-content="">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
        </div>
      </li>
    </ul>