Elements de design

Couleurs

Palette utilisée

@color1
#FF6D6D
@color2
#54C9FE
@color3
#282828
@color4
#FFCA45

Typographie

Les polices

.font1: The quick brown fox jumps over the lazy dog
.font2: The quick brown fox jumps over the lazy dog

Les couleurs

@color-titres
black;
@color-chapo
gray;
@color-body
gray;
@color-lien
#FF6D6D;
(@color1;)
@color-lien-hover
#282828;
(@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
  • Liste
  • Liste
  Liste standard
  • Liste sans bullets
  • Liste sans bullets
  • Liste sans bullets
.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
.icon-hp-on
.icon-hp-off
.icon-profil
.icon-geoloc
.icon-youtube
.icon-link
.icon-flickr
Composants

Formulaires

Inputs
$form->newField('input', 'text', 'input_text', 'Input Classique', 'Input text');


$form->newField('input', 'password', 'input_mdp', 'Input mot de passe', 'Mot de passe');


$form->addCustomField('input', 'mail', 'input_mail', 'Input email', 'support@noe-interactive.com');


$form->newField('input', 'text', 'input_date', 'Input date', 'Date');


$form->newField('input', 'text', 'input_error', 'Input error', 'Erreur');


Textareas
$form->newField('textarea', '', 'test_textarea', 'Zone de texte', '');


Listes Déroulantes
$form->newField('select', '', 'test_select', 'Liste déroulante classique', ''); + Options


Boutons Radio
$form->newField('input', 'radio', 'test_radio', 'Votre Choix', ''); + Options


Cases à cocher
$form->newField('input', 'checkbox', 'test_checkbox', 'Case à cocher simple', '');


$form->addCustomField('checkboxes', 'test_checkbox', 'Groupe de case à cocher', '', '',array('options'=>$checkboxGroupOptions));


Boutons

Les différents styles de boutons. Ces styles sont des classes donc elles marchent aussi avec des balises a. Les classes sont interchangeables et peuvent être aditionnées.

Les styles de boutons

Bouton Classe CSS Description
btn Bouton standard le plus simple possible
btn btn-primary Bouton marquant une action principale (soumission de formulaire)
btn btn-secondary Bouton marquant une action secondaire (comme une étape suivante)
btn btn-disabled Bouton désactivé

Les tailles de boutons

Bouton Classe CSS Description
btn btn-lg Gros Bouton, marche avec tous les types de boutons (primaire: btn btn-primary btn-big etc)
btn btn-wide Bouton qui prend toute la largeur de son conteneur

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

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

maxi-size

mini-size

Colored Backgrounds

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Imaged Backgrounds

Background Image Statique: bkg-img-static + background-image en inline
Background Image Statique: bkg-img-fixed + background-image en inline
Background Image Paralax: bkg-img-parallaxed + background-image en inline
Background Image Overlay: bkg-img-* avec div dedans bkg-img-overlay + background-image en inline

Layouts

Les Colonnes de Contenu

.grille-collection .has-two-cols-25

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 v

Item Titre
Item Titre

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

.grille-collection .has-two-cols-33

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.grille-collection .has-two-cols-50

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.grille-collection .has-two-cols-66

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.grille-collection .has-two-cols-75

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

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)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 Standard avec background de couleur

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 de 2 colonnes (.grille-collection .grid-contains-2)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 adipi

Grille de 3 colonnes (.grille-collection .grid-contains-3)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

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

Grille de 4 colonnes (.grille-collection .grid-contains-4)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Grille de 5 colonnes (.grille-collection .grid-contains-5)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Grille de 6 colonnes (.grille-collection .grid-contains-6)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 b

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 ad

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 gra

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Listes

Les Listes

Liste Standard (.liste-collection)

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Liste Standard avec background de couleur

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-25

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-25 .alternate

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 a

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 frin

.liste-collection .has-two-cols-25 .alternate .alternateright

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-33

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. 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

.liste-collection .has-two-cols-33 .alternate

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-33 .alternate .alternateright

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-50

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-50 .alternate

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-50 .alternate .alternateright

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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-66

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

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

.liste-collection .has-two-cols-66 .alternate

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-66 .alternate .alternateright

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-75

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

.liste-collection .has-two-cols-75 .alternate

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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 tincidu

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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-75 .alternate .alternateright

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Item Titre
Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida 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

Composants JS

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

Onglet par défaut
Contenu onglet 1
Onglet 2
Contenu onglet 2
Onglet 3
Contenu onglet 3

Fenêtres Modales

FancyBox

Element Classe CSS Description

Test fancy default

fancybox Default FancyBox width: 960px; height: 100%

Test fancy full screen

fancybox fancy-full FancyBox full screen

Test fancy modal

fancybox fancy-modal FancyBox modal

As of 1 January 2016, the Aquitaine, Limousin and Poitou-Charentes regions are now only one! Also discover tourism opportunities in