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
<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é
- 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
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
<!-- 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
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 !
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 !
<!-- 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
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
<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
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 !
Left large (yellow)
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 !
Left small (red)
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 !
Left small (bluegrey)
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 !
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 :
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
<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é
- 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
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
<!-- 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
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 !
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 !
<!-- 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
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, je suis mon meilleur modèle car le cycle du cosmos dans la vie…
<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
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 !
Left large (yellow)
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 !
Left small (red)
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 !
Left small (bluegrey)
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 !
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 :