Couleurs
Palette utilisée
#F68220
#2D2D2D
#6E6E6E
#D8D8D8
#F0F0F0
Typographie
Les polices
Les couleurs
black;
gray;
gray;
#F68220;
(@color1;)
#F68220;
(@color1;)
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 fringil

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
.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. Lorem ipsum dolor sit amet, conse

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

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
.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, 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 ipsum dolor si
.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 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 faucibu
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 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 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 blandit. Proin vel fauci
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 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 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 blandit. Proin vel fauci
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.

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

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 tinc
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 fringilla. Lorem ips

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, 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 si
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 d

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, 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 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, eleif
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 fringilla. Lorem ipsum dol

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

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

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

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
.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 adipiscing 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 fringilla. Lorem ip
.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 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 blan
.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 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. Proin gravida augue sit amet commodo fringilla. Lorem ipsum dolor sit amet
.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 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 faucibu
.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 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 elit
.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 faucibus elit, eleifend tincidunt ex. Proin gravida augue sit amet commodo fringilla. Lorem ips

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

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

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

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

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

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

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

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 a
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
Fenêtres Modales
FancyBox
Element | Classe CSS | Description |
---|---|---|
fancybox |
Default FancyBox width: 960px; height: 100% | |
fancybox fancy-full |
FancyBox full screen | |
fancybox fancy-modal |
FancyBox modal |