Couleurs
Palette utilisée
#000000
#1C1C1C
#404040
#DEDEDE
#9E8C74
#FF6275
#F7F7F7
#AFAFAF
#5E5E5E
Typographie
Les polices
Les couleurs
black;
gray;
gray;
#9E8C74;
(@color5;)
#404040;
(@color3;)
Les titres
Niveau | Classe CSS | Description |
---|---|---|
Ceci est un H1 |
.h1 |
H1 (la classe du meme nom existe aussi) |
Ceci est un H2 |
.h2 |
H2 (la classe du meme nom existe aussi) |
Ceci est un H3 |
.h3 |
H3 (la classe du meme nom existe aussi) |
Ceci est un H4 |
.h4 |
H4 (la classe du meme nom existe aussi) |
Ceci est un H5 |
.h5 |
H5 (la classe du meme nom existe aussi) |
Ceci est un H6 |
.h6 |
H6 (la classe du meme nom existe aussi) |
Les listes à puce
Markup | Classe CSS | Description |
---|---|---|
|
Liste standard | |
|
.bullets-none |
Liste sans bullets |
Autres Elements
Element | Classe CSS | Description |
---|---|---|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
chapo |
Pour les extraits |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
lettrine |
Lettrine |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Blockquote |
Icones
Les icônes
Comment créer un police d’icônes pour votre projet ? Voir la documentation
.icon-twitter
.icon-facebook
.icon-arrow-down
.icon-arrow-left
.icon-arrow-right
.icon-arrow-up
.icon-plus
.icon-minus
.icon-menu
.icon-search
.icon-cloud
.icon-fog
.icon-ice
.icon-rain
.icon-rain-heavy
.icon-snow
.icon-snow-heavy
.icon-storm
.icon-sun
.icon-sun-cloud
.icon-cross
.icon-location
.icon-informations
.icon-lock
.icon-unlock
.icon-google-plus
.icon-instagram
Formulaires
Notifications
Les styles de notifications
Notifications | Classe CSS | Description |
---|---|---|
Ceci est une info |
noeNotification info |
Message d’information |
Ceci est un succès |
noeNotification success |
Message de succès |
Ceci est une erreur |
noeNotification error |
Message d’erreur |
Labels et Badges
Les styles de labels et badges
Notifications | Classe CSS | Description |
---|---|---|
Pastille | label |
Pastille par défaut |
Pastille | label info |
Pastille d’info |
Pastille | label success |
Pastille de succès |
Pastille | label error |
Pastille d’erreur |
1 | badge |
Badge par défaut |
2 | badge info |
Badge d’info |
10 | badge success |
Badge de succès |
54 | badge error |
Badge d’erreur |
Tableaux
Les tableaux
Heading | Heading | Heading |
---|---|---|
Content | Content | Content |
Content | Content | Content |
Footer | Footer | Footer |
Ui Elements
Autres Elements
Element | Classe CSS | Description |
---|---|---|
Loading |
loader |
Loader |
caret |
Caret |
Classes
Accès rapide
Ajouter les classes double marge standard et triple marge standard
Markup | Classe CSS | Description |
---|---|---|
.left
|
.left |
left |
.right
|
.right |
right |
.hidden |
hidden | |
.alignleft
|
.alignleft |
alignleft |
.aligncenter
|
.aligncenter |
aligncenter |
.alignright
|
.alignright |
alignright |
.margin-top-standard
|
.margin-top-standard |
margin-top-standard |
.margin-right-standard
|
.margin-right-standard |
margin-right-standard |
.margin-bottom-standard
|
.margin-bottom-standard |
margin-bottom-standard |
.margin-left-standard
|
.margin-left-standard |
margin-left-standard |
.padding-top-standard
|
.padding-top-standard |
padding-top-standard |
.padding-right-standard
|
.padding-right-standard |
padding-right-standard |
.padding-bottom-standard
|
.padding-bottom-standard |
padding-bottom-standard |
.padding-left-standard
|
.padding-left-standard |
padding-left-standard |
.padding-top-none
|
.padding-top-none |
padding-top-none |
.padding-right-none
|
.padding-right-none |
padding-right-none |
.padding-bottom-none
|
.padding-bottom-none |
padding-bottom-none |
.padding-left-none
|
.padding-left-none |
padding-left-none |
.margin-top-none
|
.margin-top-none |
margin-top-none |
.margin-right-none
|
.margin-right-none |
margin-right-none |
.margin-bottom-none
|
.margin-bottom-none |
margin-bottom-none |
.margin-left-none
|
.margin-left-none |
margin-left-none |
Wrappers
Conteneurs
Colored Backgrounds
Imaged Backgrounds
Layouts
Les Colonnes de Contenu
.grille-collection .has-two-cols-25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor s
.grille-collection .has-two-cols-33

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet com
.grille-collection .has-two-cols-50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida
.grille-collection .has-two-cols-66

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend ti

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing
.grille-collection .has-two-cols-75

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue si

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Pro
Les Colonnes de texte
.text-colonnes-x2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.text-colonnes-x3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.text-colonnes-x4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Grilles
Les Grilles standards
Grille Standard (.grille-collection)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidun

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus mol

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing el
Grille Standard avec background de couleur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidun

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus mol

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing el
Grille de 2 colonnes (.grille-collection .grid-contains-2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nib

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravi
Grille de 3 colonnes (.grille-collection .grid-contains-3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus ni

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin
Grille de 4 colonnes (.grille-collection .grid-contains-4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet co
Grille de 5 colonnes (.grille-collection .grid-contains-5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem i

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tinc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur a
Grille de 6 colonnes (.grille-collection .grid-contains-6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringill

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fri

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel
Listes
Les Listes
Liste Standard (.liste-collection)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing e

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commo
Liste Standard avec background de couleur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing e

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commo
.liste-collection .has-two-cols-25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleife

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend
.liste-collection .has-two-cols-25 .alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus mol

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bla
.liste-collection .has-two-cols-25 .alternate .alternateright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, co

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin ve
.liste-collection .has-two-cols-33

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bland

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipisc
.liste-collection .has-two-cols-33 .alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipiscin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ips
.liste-collection .has-two-cols-33 .alternate .alternateright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin
.liste-collection .has-two-cols-50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bland

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin
.liste-collection .has-two-cols-50 .alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectet
.liste-collection .has-two-cols-50 .alternate .alternateright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh bla
.liste-collection .has-two-cols-66

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor
.liste-collection .has-two-cols-66 .alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida aug

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, conse
.liste-collection .has-two-cols-66 .alternate .alternateright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit am

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue
.liste-collection .has-two-cols-75

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus eli
.liste-collection .has-two-cols-75 .alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet c

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus e
.liste-collection .has-two-cols-75 .alternate .alternateright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem i
Onglets
Les onglets
Le js et la css des onglets sont inclus de base. Pour le markup, se référrer au gist dans gistBox: https://gist.github.com/NOEinteractive/ce48b5d55174f75f2285