FREE SHIPPING ACROSS CANADA ON ORDERS OVER $49

Page étroite de test

Ce guide de style définit le style des éléments html de base et des composants réutilisables.


Rubriques

La taille des caractères des en-têtes sera définie par des classes d'utilité ou des noms de classe dans les composants de conception. Ainsi, les balises d'en-tête peuvent être choisies et modifiées à des fins d'optimisation des moteurs de recherche sans incidence sur la conception.

h1. Rubrique

h2. Rubrique

h3. Rubrique

h4. Rubrique

h5. Rubrique
h6. Rubrique

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

Rubriques - Classes d'utilité

Possibilité d'utiliser des classes d'utilité pour appliquer des styles de titres qui ne s'alignent pas avec le niveau de titres sématiques.

h1. Rubrique

h2. Rubrique

h3. Rubrique

h4. Rubrique

h5. Rubrique

h6. Rubrique



h1. Rubrique

h2. Rubrique

h3. Rubrique

h4. Rubrique

h5. Rubrique

h6. Rubrique



h6. Titre en majuscules

h4. Titre en italique


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

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

      <h1 class="h6 font-sans-serif font-uppercase">h6. Heading Uppercase</h1>
      <h1 class="h4 font-sans-serif">h4. Heading <em>with italics</em></h1>
    </div>
  

Rubriques - Éditeur de texte enrichi

Appliquer la taille de la police d'en-tête pour les sections gérées par un éditeur wysiwyg. Appliquer la classe "rte" (éditeur de texte enrichi) aux régions qui seront redéfinies par ce balisage. Pour faciliter l'expérience d'édition du client, nous ne voulons pas introduire la nécessité de classes de modification.

h2. Titre en italique

h3. Rubrique

h4. Rubrique

h5. Rubrique
h6. Rubrique

    <div class="rte">
      <h2>h2. Heading <em>with italics</em></h2>
      <h3>h3. Heading</h3>
      <h4>h4. Heading</h4>
      <h5>h5. Heading</h5>
      <h6>h6. Heading</h6>
    </div>
  

Paragraphe

Quand avez-vous écrit une lettre à un proche pour la dernière fois ? Ou un courriel simplement parce que vous avez testé le lien? Servez-vous une tasse de thé et FaceTime votre meilleur ami à l'autre bout du pays ou testez l'audace 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 en italique 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.

La gentillesse est contagieuse. Répandons-la partout.


    <p>When is the last time you wrote a letter to a loved one? Or an email just because <a href="#" title="test link">test link</a>? Pour yourself a cup of tea and FaceTime your best friend across the country or <strong>testing bold</strong> across the street. And your grandma while you’re at it. Offer to grab some groceries or <em>testing italics</em> prescriptions for the elderly couple in your building when you’re heading out to get yours. Not everyone has a robust immune system or access to cars or bikes, see where you can help. And while you’re there, thank the cashiers and the ones stocking the shelves – they are literally putting themselves in harm’s way to make sure that those of us who are staying home have food, vitamins and toilet paper. A smile and a thank you can go a long way. Ditto for doctors and nurses. Imagine what their days are like lately. Remember that health is more than whether or not we are sick with a virus. Health is also about emotional and mental well-being.</p>

    <p>Kindness is contagious. Let’s spread it around.</p>
  

Paragraphe - Éditeur de texte enrichi

Quand avez-vous écrit une lettre à un proche pour la dernière fois ? Ou un courriel simplement parce que vous avez testé le lien? Servez-vous une tasse de thé et FaceTime votre meilleur ami à l'autre bout du pays ou testez l'audace 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 en italique pour le couple de personnes âgées de votre immeuble lorsque vous allez chercher les vôtres.

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

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.

La gentillesse est contagieuse. Répandons-la partout.

  1. Idem pour les médecins et les infirmières.
  2. Imaginez ce que sont leurs journées ces derniers temps.
  3. 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.

    <div class="rte">
      <p>When is the last time you wrote a letter to a loved one? Or an email just because <a href="#" title="test link">test link</a>? Pour yourself a cup of tea and FaceTime your best friend across the country or <strong>testing bold</strong> across the street. And your grandma while you’re at it. Offer to grab some groceries or <em>testing italics</em> prescriptions for the elderly couple in your building when you’re heading out to get yours.</p>

      <blockquote>“Full of fragrant spices and a wholesome nutritional hug from our new Veggie Broth.”</blockquote>

      <p>Not everyone has a robust immune system or access to cars or bikes, see where you can help. And while you’re there, thank the cashiers and the ones stocking the shelves – they are literally putting themselves in harm’s way to make sure that those of us who are staying home have food, vitamins and toilet paper. A smile and a thank you can go a long way.</p>

      <ul>
        <li>Ditto for doctors and nurses.</li>
        <li>Imagine what their days are like lately.</li>
        <li>Remember that health is more than whether or not we are sick with a virus. Health is also about emotional and mental well-being.</li>
      </ul>

      <p>Kindness is contagious. Let’s spread it around.</p>

      <ol>
        <li>Ditto for doctors and nurses.</li>
        <li>Imagine what their days are like lately.</li>
        <li>Remember that health is more than whether or not we are sick with a virus. Health is also about emotional and mental well-being.</li>
      </ol>
    </div>
  

Boutons


    <a href="#" class="btn">Button Default</a>
    <a href="#" class="btn btn--wide">Button Wide</a>
    <a href="#" class="btn btn--slim">Button Slim</a>
    <a href="#" class="btn btn--full-width">Button Full Width</a>

    <a href="#" class="btn btn--small">Button Small</a>
    <a href="#" class="btn btn--large">Button Large</a>

    <a href="#" class="btn btn--secondary">Button Secondary</a>
    <a href="#" class="btn btn--secondary btn--small">Button Secondary + Button Small</a>

    <a href="#" class="btn btn--tertiary">Button Tertiary</a>
  

Types de listes

Liste des définitions

Définition Liste Titre
Il s'agit d'une division de la liste des définitions.
Définition Liste Titre
Il s'agit d'une division de la liste des définitions.


Liste ordonnée

  1. Liste Point 1
  2. Liste Point 2
  3. Liste Point 3


Liste non ordonnée

  • Liste Point 1
  • Liste Point 2
  • Liste Point 3


Liste des cases à cocher

  • Liste Point 1
  • Liste Point 2
  • Liste Point 3


    // Definition List
    <dl class="list--definition">
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
      <dt>Definition List Title</dt>
      <dd>This is a definition list division.</dd>
    </dl>

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

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

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

  

Tableau

Commande ID Date de facturation Total Détails
1232434 23 septembre 2018 $29.99 Voir les détails
1232434 23 septembre 2018 $29.99 Voir les détails

    <table>
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Billing Date</th>
          <th>Total</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1232434</td>
          <td>September 23rd 2018</td>
          <td>$29.99</td>
          <td><a href="#">View Details</a></td>
        </tr>
        <tr>
          <td>1232434</td>
          <td>September 23rd 2018</td>
          <td>$29.99</td>
          <td><a href="#">View Details</a></td>
        </tr>
      </tbody>
    </table>
  

Liste des tableaux de données


    <ul class="data-table">
      <li class="data-table__header">
        <div>Order ID</div>
        <div>Billing Date</div>
        <div>Total</div>
        <div>Details</div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">September 23rd 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">View Details</a></div>
      </li>
      <li>
        <div data-th="Order ID">235345334</div>
        <div data-th="Billing Date">September 23rd 2018</div>
        <div data-th="Total">$29.99</div>
        <div data-th="Details"><a href="#">View Details</a></div>
      </li>
    </ul>
  

Champs de texte


    <form class="form-vertical">
      <input type="text" id="text_field" placeholder="Text field with placeholder text...">

      <label for="text_field_2">Text Field</label>
      <input type="text" id="text_field_2">

      <label for="text_field_3">Text Field with Value</label>
      <input type="text" id="text_field_3" value="Value Here">

      <label for="text_area">Text Area</label>
      <textarea id="text_area" rows="6"></textarea>

      <label for="password">Password</label>
      <input type="password" name="password">
    </form>
  

Listes de sélection


    <form class="form-vertical">
      <label for="select_element">Select Element</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>
  

Radios


    <form class="form-vertical">
      <label for="radio_buttons">Radio Buttons</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>
  

Cases à cocher


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

Incrément


    <div class="form-increment" data-quantity-change>
      <button data-action="dec" type="button"><span class="visually-hidden">Decrease</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">Increase</span></button>
    </div>
  

Accordéon


    <ul class="accordion" data-accordion>
      <li class="accordion__tab">
        <button aria-expanded="false" class="accordion__heading" type="button" data-accordion-button>Features</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>Uses</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>
  

Héros

Image avec texte superposé

Utilisez un texte en superposition pour donner à vos clients un aperçu de votre marque. Choisissez des images et du texte qui se rapportent à votre style et à votre histoire.


    <div data-section-id="hero-1" data-section-type="hero-section">
      <div class="hero hero--large hero-hero-1 hero__overlay box ratio-container js lazyloaded" id="Hero-hero-1" data-layout="full_width">
        <div class="placeholder-background"></div>
        <div class="hero__inner">
          <div class="page-width text-center">
            <h2 class="h1 mega-title mega-title--large">Image with text overlay</h2>
            <div class="rte-setting mega-subtitle mega-subtitle--large">
              <p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>
            </div>
          </div>
        </div>
      </div>
    </div>