Titres

---

Niveau 1

Niveau 2

Niveau 3

Niveau 4

Niveau 5

Niveau 6

# Niveau 1
## Niveau 2
### Niveau 3
#### Niveau 4
##### Niveau 5
###### Niveau 6

note: laisser un espace avant et après chaque titre

Textes

---

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nascetur ridiculus mus mauris vitae. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Et leo duis ut diam quam nulla porttitor massa. Risus at ultrices mi tempus imperdiet nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nascetur ridiculus mus mauris vitae. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Et leo duis ut diam quam nulla porttitor massa. Risus at ultrices mi tempus imperdiet nulla.

note: laisser un espace avant et après chaque paragraphe

textes

Lorem ipsum dolor sit amet ...

Lorem ipsum dolor sit amet ...

++Lorem ipsum dolor++ sit amet ...

Lorem ipsum dolor sit amet ...

Lorem ipsum dolor sit amet ...

_texte italique_
**texte en gras**
++texte souligné++
~~texte barré~~
~~[texte du lien](url "texte du lien au survol")~~

citations

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nascetur ridiculus mus mauris vitae. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Et leo duis ut diam quam nulla porttitor massa. Risus at ultrices mi tempus imperdiet nulla.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.
>
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Nascetur ridiculus mus mauris vitae. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. Et leo duis ut diam quam nulla porttitor massa. Risus at ultrices mi tempus imperdiet nulla.

note: l’utilisation du chevron > devant un élément met en place un bloc citation

Listes

---

Bulles

• Lorem … 1
• Lorem … 2
• Lorem … 3
• Lorem … 4
• Lorem … 5
• Lorem … 6

- [x] Lorem ... 1
- [x] Lorem ... 2
- [x] Lorem ... 3
- [ ] Lorem ... 4
- [ ] Lorem ... 5

Classique

• Lorem ipsum 1
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Turpis nunc eget lorem dolor sed viverra ipsum nunc.
• Lorem ipsum 2
• Lorem ipsum 3
  • Dolor sit amet 3.1
  • Dolor sit amet 3.2
• Lorem ipsum 4

- Lorem ipsum 1
  _Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Turpis nunc eget lorem dolor sed viverra ipsum nunc._
- Lorem ipsum 2
- Lorem ipsum 3
   - Dolor sit amet 3.1
   - Dolor sit amet 3.2
- Lorem ipsum 4

Sans puce

• Lorem ipsum 1
• Lorem ipsum 2
• Lorem ipsum 3
• Lorem ipsum 4
• Lorem ipsum 5

<ul class="no-style">
<li>Lorem ipsum 1</li>
<li>Lorem ipsum 2</li>
<li>Lorem ipsum 3</li>
<li>Lorem ipsum 4</li>
<li>Lorem ipsum 5</li>
</ul>

Avec icones

• Lorem ipsum 1
• Lorem ipsum 2
• Lorem ipsum 3

<ul class="no-style has-icon">
<li><i class="fas fa-map-marker-alt color-blue"></i> Lorem ipsum 1</li>
<li><i class="fas fa-campground color-yellow"></i> Lorem ipsum 2</li>
<li><i class="fas fa-hamburger color-red"></i> Lorem ipsum 3</li>
</ul>

Numéroté

1. Lorem ipsum 1
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Turpis nunc eget lorem dolor sed viverra ipsum nunc.
2. Lorem ipsum 2
3. Lorem ipsum 3
   1. Dolor sit amet 3.1
   2. Dolor sit amet 3.2
4. Lorem ipsum 4

1. Lorem ipsum 1
  _Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Turpis nunc eget lorem dolor sed viverra ipsum nunc._
1. Lorem ipsum 2
1. Lorem ipsum 3
   1. Dolor sit amet 3.1
   1. Dolor sit amet 3.2
1. Lorem ipsum 4

Boutons

---

standard

button classic button classic block button classic disabled

<p>
  <!-- bouton classic -->
  <a class="button" href="#">button classic</a>

  <!-- bouton block -->
  <a class="button block" href="#">button classic block</a>

  <!-- bouton disabled -->
  <a class="button disabled" href="#">button classic disabled</a>
</p>

note: la balise p permet de groupper les boutons, laisser un espace avant et après

icones

button button button button button

<p>
  <a class="button" href="#">
    <!-- remplacer par le code icone trouvé sur fontawesome.com -->
    <i class="fab fa-accessible-icon"></i>

    my button
  </a>
</p>

voir toutes les icones sur fontawesome.com

couleurs

button primary button primary block

button secondary button secondary block

button winter-primary button winter-primary block

button winter-secondary button winter-secondary block

<p>
  <!-- bouton primary -->
  <a class="button primary" href="#">button primary</a>

  <!-- bouton secondary -->
  <a class="button secondary" href="#">button secondary</a>

  <!-- bouton winter-primary -->
  <a class="button winter-primary" href="#">button winter-primary</a>

  <!-- bouton winter-secondary -->
  <a class="button winter-secondary" href="#">button winter-secondary</a>
</p>

alignement

button left

button center

button right

<!-- boutons alignés a gauche -->
<p>
  <a class="button" href="#">button left</a>
  <a class="button" href="#">button left 2 ..</a>
</p>

<!-- boutons centrés -->
<p class="align-center">
  <a class="button" href="#">button center</a>
</p>

<!-- boutons alignés a droite -->
<p class="align-right">
  <a class="button" href="#">button right</a>
</p>

Pannels

---

Textes

<!-- il faut un div "pannels" par ligne -->
<div class="pannels">

<!-- il faut un div "pannel" par colone -->
<div class="pannel">

<!-- le contenu ne doit pas avoir d'espace au début -->
Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div> <!-- fin de la colone -->


<!-- une autre colone avec un div "pannel" -->
<div class="pannel">

Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div> <!-- fin de la colone -->

</div> <!-- fin de la ligne -->

note: il est préférable de ne pas indenter le code html, laisser un espace avant et après

Boxed

<div class="pannels">

<!-- on ajoute un div "pannel-dark" en plus du "pannel" pour créer un block constrasté dans la colone -->
<div class="pannel">
<div class="pannel-dark">

Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div>
</div> <!-- fin de la colone -->

<!-- on peut choisir parmis "pannel-dark", "pannel-bluegrey", "pannel-light" et "pannel-card" -->
<div class="pannel">
<div class="pannel-card">

Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div>
</div> <!-- fin de la colone -->

</div> <!-- fin de la ligne -->

Expand

<div class="pannels">

<!-- on ajoute un div "pannel-expand" pour forcer la colone à prendre la place disponible -->
<div class="pannel pannel-expand">
<div class="pannel-card">

Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div>
</div> <!-- fin de la colone -->

<div class="pannel">
<div class="pannel-card">

Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div>
</div> <!-- fin de la colone -->

</div> <!-- fin de la ligne -->

Images

---

Default

Left large (yellow)

Left small (red)

Left small (bluegrey)

Illustrations

• /images/illustrations/404_page_not_found.svg
• /images/illustrations/bartender.svg
• /images/illustrations/calendar.svg
• /images/illustrations/camping.svg
• /images/illustrations/card_payment.svg
• /images/illustrations/coughing.svg
• /images/illustrations/credit_card.svg
• /images/illustrations/diversity.svg
• /images/illustrations/dream.svg
• /images/illustrations/ecology.svg
• /images/illustrations/email_campaign.svg
• /images/illustrations/explosion.svg
• /images/illustrations/family.svg
• /images/illustrations/hiking.svg
• /images/illustrations/idea.svg
• /images/illustrations/instagram_post.svg
• /images/illustrations/logistics.svg
• /images/illustrations/map.svg
• /images/illustrations/marketing.svg
• /images/illustrations/mountain.svg
• /images/illustrations/mountain2.svg
• /images/illustrations/note_taking.svg
• /images/illustrations/online_campaign.svg
• /images/illustrations/online_payment.svg
• /images/illustrations/online_protection.svg
• /images/illustrations/open_map.svg
• /images/illustrations/parachute.svg
• /images/illustrations/party.svg
• /images/illustrations/pr.svg
• /images/illustrations/receptionist.svg
• /images/illustrations/recycling.svg
• /images/illustrations/road_trip.svg
• /images/illustrations/party.svg
• /images/illustrations/start_up.svg
• /images/illustrations/startup.svg
• /images/illustrations/step_1.svg
• /images/illustrations/step_2.svg
• /images/illustrations/step_3.svg
• /images/illustrations/summer_landscape.svg
• /images/illustrations/timeline.svg
• /images/illustrations/travel_plans.svg
• /images/illustrations/wearing_a_mask_men.svg
• /images/illustrations/wearing_a_mask_women.svg
• /images/illustrations/winner.svg
• /images/illustrations/world_connection.svg

note: les illustrations existent en bleu (defaut) / jaune > camping_yellow.svg / rouge > camping_red.svg / bleu gris > camping_bluegrey.svg

<!-- début de l'illustration, on peut utiliser "illustration-left-small", "illustration-left-large" ou rien pour différentes tailles -->
<div class="illustration-container illustration-small">

<!-- on peut mettre l'illustration avant ou après le "illustration-text" -->
<div class="illustration">
<img src="/images/illustrations/camping.svg" alt="camping" />
</div>

<!-- texte de l'illustration: on peut utiliser les pannels à l'interieur -->
<div class="illustration-text">
<div class="pannel">
<div class="pannel-card">
Même si on se ment, je sais que, grâce à ma propre vérité il y a de bonnes règles, de bonnes rules et c’est très, très beau d’avoir son propre moi-même ! Et là, vraiment, j’essaie de tout coeur de donner la plus belle réponse de la terre !

</div>
</div>
</div> <!-- fin du texte de l'illustration -->

</div> <!-- fin de l'illustration -->

Tableaux

---

colone a	colone b	colone c	colone d
ligne 1	1	0	0
ligne 2	0	1	0
ligne 3	0	0	1
ligne 4	0	0	1

| colone a | colone b | colone c | colone d |
|---|:---|:---:|---:|
| ligne 1 | 1 | 0 | 0 |
| ligne 2 | 0 | 1 | 0 |
| ligne 3 | 0 | 0 | 1 |
| ligne 4 | 0 | 0 | 1 |

note: la seconde ligne permet de définir l’alignement du titre et du contenu grâce aux deux-points :