Quick start

Stylesheets
css

Ajoutez ces liens dans le head de votre document html

Scripts
js

Ajoutez ces liens juste avant la fermeture de votre body

Grid

La grille de bootstrap 3.3.6 est utilisée

https://bootstrapdocs.com/v3.3.6/docs/css/

 

Les classes d'affichage mobile sont également présentes

Voir la documentation

Éléments typographiques

H1

Ceci est un titre de niveau 1

Ceci est un titre de niveau 1

H2

Ceci est un titre de niveau 2

Ceci est un titre de niveau 2

H3

Ceci est un titre de niveau 3

Ceci est un titre de niveau 3

P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus.

Mention

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

Couleurs

Chaque couleur dispose d'une classe pour le texte et pour la couleur de fond.
Utiliser text-nomcouleur pour colorer le texte et nomcouleur pour styliser le background

Principales

storm-gray
#717380

spun-pearl
#a7a9bb

athens-gray
#f1f1f3

picton-blue
#45b7df

white-ice
#daf1f9

apricot
#ed7374

pippin
#ffe1e1

lightning
#ffc011

smoky
#54516f

martinique
#33304c

Spécifiques

Retraite
(pension)
#ea4e43

Santé
(health)
#f7a93f

Prévoyance
(foresight)
#78c6bf

Services
(services)
#5287b6

Épargne
(saving)
#9b89b8

Icônes

Classiques


rse

about

arrow-down

arrow-left

arrow-right

arrow-up

assistance-line

avatar

award-line

bank-details-line

bubble-01

bubble-02

bubble-03

bubble-04

bubble-speech-line

bubble-speech

calculator-line

calculator

calendar

camera-line

career

caret-down

caret-left

caret-right

caret-up

check

chevron-down

chevron-left

chevron-right

chevron-up

close

cog-line

complaint-line

contact

deconnexion

doc-line

download

euro

eye

facebook

faq

foresight

googleplus

health-suitcase

health

home

id-card-line

info

inscription-line

job-line

linkedin

lock-line

lock

mag

mail

map-marker-line

map-marker

megaphone-line

men-line

more

news-line

pdf

pen

pension

phone

play

present-line

press-line

press

private-individual-line

professional-line

protection-line

protection-user-line

quote

results-search-line

rocket-euro

rocket

saving

search

services

share

space-cost-estimate

star

suitcase-line

thumbs-up

twitter

user-line

user

viadeo

women-line

write-line

write

youtube

Dans un ovoïde

Il existe 4 formes d'ovoïdes, ils sont numérotés dans l'utilisation des classes.
Les icônes de ce type peuvent être picton ou apricot.

Classes utiles

// Blocks styling
.superwrapper {
  font-family: $roboto;
}

.bordered-container {
  padding: 50px 0;
  border: 1px solid $spun-pearl;
}

.action-btns-wrapper {
  margin-top: 50px;
}

.question-wrapper {
  & + .question-wrapper {
    margin-top: 30px;
  }
}

// Alignment classes
.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-space-between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

Boutons

Boutons d'action


    bouton



    icône a droite
    



    
    icône a gauche



    bouton désactivé



    picton blue



    apricot



    white



    secondary
    

Boutons radio

Notez l'ajout d'une classe radio-button-other-choice sur le label concerné ainsi que l'ajout d'un input avec la classe radio-button-text pour gérer l'affichage du champs au clic.

Boutons radio large

Notez l'ajout d'un data-details sur le label concerné ainsi que l'ajout de la div radio-buttons-details à la fin de la liste des radios pour gérer l'affichage de détails supplémentaires.

Boutons radio avec icônes

Switch buttons

Lorem ipsum dolor sit amet consectetur adipscit elit.

Lorem ipsum dolor sit amet consectetur adipscit elit.

Tooltips

Ceci est un titre de niveau 2

Element

Inter haec orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens.

Element

Inter haec orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens.

Range Slider

Simple

Version mobile

Double

Pour plus d'informations sur les data-attributes à disposition, se rendre sur la documentation du plugin

Version mobile

Modal Box

Champs formulaire

Input text


With icon


Datepicker


Select


Tel


Checkboxes

Radios

Errors

Ce champ ne peut pas être vide

Ce champ ne peut pas être vide

Upload

Justificatif d'identité

  • carte-identité-recto.pdf

Ou cliquez-déposez votre fichier ici

Exemple : recto.pdf / verso.pdf

Justificatif d'identité

  • carte-identité-recto.pdf

Ou cliquez-déposez votre fichier ici

Exemple : recto.pdf / verso.pdf