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 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 nib
.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 molest

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 elit
.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 gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur

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
.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 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 gravi
.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 sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adi

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
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 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

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
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 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

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
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, el
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 m

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

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
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

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 tinci

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 commod

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, cons
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, consectetur adipiscing

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 faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet comm

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 fa

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 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 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

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,

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. Lore

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 nib
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. Pro

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, con

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 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. Pro

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, con

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-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 commod

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 tinci
.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 molestie, a rhoncus nibh blandit. Proin vel

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 rhon
.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 rh

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
.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 blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue 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 vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum d
.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. Lore

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
.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 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
.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 blandit. Proin vel faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla.

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 a
.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,

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
.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. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur adipis

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, elei
.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 gr

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 rhonc
.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 augue sit amet commodo fringilla. Lorem ipsum dolor 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 e
.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 amet commodo fringilla. Lorem ipsum dolor sit amet, consectetur

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. P
.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

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 rhon
.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 commodo fringilla. Lorem ipsum dolor sit amet, consectetur a

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
.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. Lor

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. Proi
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