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

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 ame
.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 rhoncu

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
.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 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, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet, consectet
.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 fauc

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

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

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
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, 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 elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit ame

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

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

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 ex. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit ame
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 mole

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 fr

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

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

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

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

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

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

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
.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 faucibus elit, eleifend

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

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

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 fringi
.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, ele

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-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 blandit. Proin vel faucib

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

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. P
.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 fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing 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
.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 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
.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 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.
.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.

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

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

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