Structures HTML

0 Variables globales

# 0-1 Facteurs globaux

size-factor
space-factor
rounded-factor

# 0-2 Fonts

font-family-text
font-family-title
font-weight-text
font-weight-title

# 0-3 Transitions

animation-factor
transition-timing-function

# 0-4 Palette de couleurs

Color-high
Color-front
Color-quiet
Color-link
Color-important
Color-main
Color-back
Color-back-alternate
Color-border
Color-back-hover
Color-info-front
Color-success-front
Color-warning-front
Color-error-front
Color-disabled-front
Color-info-back
Color-success-back
Color-warning-back
Color-error-back
Color-disabled-back
Color-style-1
Color-style-2
Color-style-3
Color-style-4
Color-style-5
Color-style-6
Color-style-7
Color-style-8
Color-style-9
Color-style-10
Color-contrasted-light
Color-contrasted-dark

# 0-5 Cohérence

Color-front :
Color-quiet :
Color-high :
Color-link :
Color-important :
Color-front :
Color-quiet :
Color-high :
Color-link :
Color-important :
Color-main-contrasted :
Color-disabled-front :
Color-error-front :
Color-main-contrasted :

1 Admin

# 1-1 AdminAction

Actions admin

# 1-2 AdminPlaceholder

Placeholder admin
Placeholder admin

2 Base

# 2-1 IconSvg

Faire correspondre à la taille d'un text ou d'un titre size + sizeFit
fit Text tiny
fit Text small
fit Text medium
fit Text big
fit Text large
fit Text extra

fit Title tiny

fit Title small

fit Title medium

fit Title big

fit Title large

fit Title extra

Mode de rendu et Couleur mode +/- ( style / status / weight )
Weightsfadedframedfilled
quiet
normal
highlight
Statusfadedframedfilled
info
success
warning
error
disabled
Stylesfadedframedfilled
1
2
3
4
5
6
7
8
9
10

Taille et padding prédéfini size +/- padded
tiny
small
medium
big
large
extra
size
size + spaced

Taille custom en px size

# 2-2 Image

# 2-3 Link

Tous les états
( quiet )> Ceci est un lien( normal )> Ceci est un lien( highlight )> Ceci est un lien

# 2-4 ListHtml

Listes simples
Liste non ordonnée
  • Contenu 1
  • Contenu 2
Lorem ipsum (texte en dessous)
Liste ordonnée
  1. Contenu 1
  2. Contenu 2
Lorem ipsum (texte en dessous)

Listes imbriquées
Listes imbriquées non ordonnées
  • Contenu 1
  • Contenu 2
    • Contenu 2.1
    • Contenu 2.2
    • Contenu 2.3
  • Contenu 3
Lorem ipsum (texte en dessous)
Listes imbriquées ordonnées
  1. Contenu 1
  2. Contenu 2
    1. Contenu 2.1
    2. Contenu 2.2
    3. Contenu 2.3
  3. Contenu 3
Lorem ipsum (texte en dessous)

# 2-5 Separator

Separateur

# 2-6 Table

Tableau avec et sans mode alternate
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied

Matrice de Rendu des Tables
Weightsfadedframedfilledquiet
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
normal
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
highlight
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied
En-têteEn-tête
Ligne normaleLigne normale
Ligne alternéeLigne alternée
piedpied

# 2-7 Text

Tous les états
( quiet )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
( quiet + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + bold )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
( quiet + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + italic )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
( quiet + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( normal + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( highlight + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.( important + underline )> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Casing(text-transform):

TeXt MoDiFiEd! (<=default value)
TeXt MoDiFiEd! (lowercase)
TeXt MoDiFiEd! (uppercase)
TeXt MoDiFiEd! (capitalize)

Taille de texte:

tiny
small
medium
big
large
extra

Mode de rendu et Couleur mode +/- ( style / status / weight )
Weightsfadedframedfilled
quiettextetextetexte
normaltextetextetexte
highlighttextetextetexte
Statusfadedframedfilled
infotextetextetexte
successtextetextetexte
warningtextetextetexte
errortextetextetexte
disabledtextetextetexte
Stylesfadedframedfilled
1textetextetexte
2textetextetexte
3textetextetexte
4textetextetexte
5textetextetexte
6textetextetexte
7textetextetexte
8textetextetexte
9textetextetexte
10textetextetexte

# 2-8 Title

Casing(Title-transform):

tItLe MoDiFiEd! (<=default value)

tItLe MoDiFiEd! (lowercase)

tItLe MoDiFiEd! (uppercase)

tItLe MoDiFiEd! (capitalize)

Positions

A gauche

Centré

A droite

Types et déclinaisons
Faux Titre H1Faux Titre H2Faux Titre H3Faux Titre H4Faux Titre H5Faux Titre H6

Vraie H1 Minuscule

Vraie H2 Petit

Vraie H3 Moyen

Vraie H4 Gros

Vraie H5 Large
Vraie H6 Extra

Types et déclinaisons

Titre H1 quiet

Titre H2 quiet

Titre H3 quiet

Titre H4 quiet

Titre H5 quiet
Titre H6 quiet

Titre H1 normal

Titre H2 normal

Titre H3 normal

Titre H4 normal

Titre H5 normal
Titre H6 normal

Titre H1 highlight

Titre H2 highlight

Titre H3 highlight

Titre H4 highlight

Titre H5 highlight
Titre H6 highlight

Avec îcones

Titre H1 normal

Titre H2 normal

Titre H3 normal

Titre H4 normal

Titre H5 normal
Titre H6 normal

3 Card

# 3-1 ActionListItem

Action List Item
ActionListItem
en mode normal
A
B
C
ActionListItem
en mode normal
A
B
C

# 3-2 Card

Mode de rendu et Couleur mode +/- ( style / status / weight )
Weightsfadedframedfilled
quiet
Card
Card
Card
normal
Card
Card
Card
highlight
Card
Card
Card
Statusfadedframedfilled
info
Card
Card
Card
success
Card
Card
Card
warning
Card
Card
Card
error
Card
Card
Card
disabled
Card
Card
Card
Stylesfadedframedfilled
1
Card
Card
Card
2
Card
Card
Card
3
Card
Card
Card
4
Card
Card
Card
5
Card
Card
Card
6
Card
Card
Card
7
Card
Card
Card
8
Card
Card
Card
9
Card
Card
Card
10
Card
Card
Card

# 3-3 KeyFigure

Design des chiffres clés
20 000
Visiteurs
20 000 000
€
Chiffre d'affaire
400
Exposant
6,3
Rendez-vous par jour
20 000
m²
de surface d'exposition
20 000
Avec lien
20 000
Visiteurs
20 000
Visiteurs
20 000
Visiteurs
20 000
Visiteurs
20 000
Visiteurs

# 3-4 NavElem

Design des cards "éléments de navigation"
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
Bouton 1Bouton 2
Avec icône entouré
Description : + liste de 2 items + 2 boutons + alignement au centre
Bouton 1Bouton 2
Avec image non cerclée
Description : + liste de 2 items + 2 boutons + alignement à droite
Bouton 1Bouton 2
Avec image cerclée
Description : et lien global
Désactivé
Description : et lien global

Design des cards "éléments de navigation", tests de tailles d'images
400 x 300 px pour visuel 150px
400 x 300 px pour visuel cerclée 150px
200 x 300 px pour visuel 150px
200 x 300 px pour visuel cerclée 150px
50 x 50 px pour visuel 150px
50 x 50 px pour visuel cerclée 150px
400 x 100 px pour visuel 150px
400 x 100 px pour visuel cerclée 150px
100 x 400 px pour visuel 150px
100 x 400 px pour visuel cerclée 150px

# 3-5 Product

Options ImageFit Produit

cover: image couvre toute la zone visuel du produit, quitte a être coupé (option par default)

product 500*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 500*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier

scale-down: image entierement visible, pas coupé

product 500*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 500*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier

empty: image a echelle 1:1 est coupé si sort de la zone visuel

product 500*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 500*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
product 50*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier

Exemple Product
Produit
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 400*400
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 40*40
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 500*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 50*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 400*400
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 40*40
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 500*50
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier
Produit 50*500
123456789
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
44,99 €
champ de fusion mise au panier

# 3-6 SearchListItem

Design des cards "Elément de liste de résultat"

Carte avec icone et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec icone rounded et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 400x400 et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 400x400 rounded et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 64x64 contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 64x64 rounded et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 64x300 et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Carte avec image 64x300 rounded et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Price : 10 €

Carte avec image 300/64 et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Price : 10 €

Carte avec image 300/64 rounded et contenu

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Price : 10 €

4 Component

# 4-1 MenuImage

Design des MenuImage avec Arrow + parametrage divers(card framed, icon filled, style 1, etc...)

Menu Image Simple

Menu Image avec Arrow + Icone

Menu Image avec Arrow + Icone et Contenu

  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

Menu Image avec Arrow + Icon, Contenu et Badge

Badge
  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

Design des MenuImage brut

Menu Image Simple

Menu Image avec Icone

Menu Image Icone et Contenu

  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

Menu Image Icon, Contenu et Badge

Badge
  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

Design des MenuImage en mode full

Menu Image Simple

Menu Image avec Icone

Menu Image Icone et Contenu

  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

Menu Image Icon, Contenu et Badge

Badge
  • Gérer les badges
  • Inscrire un individu
  • Relancer les abandonnistes
  • Annuler une inscription

5 External

# 5-1 CkEditor

Editeur "inline"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

# 5-2 DhtmlxScheduler

# 5-3 FlatPickr

Date

# 5-4 Highchart

Quelques exemples de type de chart

# 5-5 JQueryUiSlider

Design

Toutes options

# 5-6 JQueryUiSpinner

Spinner

# 5-7 JsTree

JsTree à choix multiple toutes options

JsTree à choix unique toutes options

# 5-8 Slickgrid

# 5-9 Tabulator

6 Form

# 6-1 Button

Toutes les options des boutons
Lien avec style boutonLien avec style bouton désactivé
Lien avec style boutonLien avec style bouton désactivé
Lien avec style boutonLien avec style bouton désactivé
Lien avec style boutonLien avec style bouton désactivé

Matrice de Rendu des boutons
Weightsfadedframedfilled
quiet
normal
highlight
Statusfadedframedfilled
info
success
warning
error
disabled
Stylesfadedframedfilled
1
2
3
4
5
6
7
8
9
10

Taille des boutons

# 6-2 ButtonSet

Simple

# 6-3 CheckBox

Checkboxes tous états

Checkboxs avec label

# 6-4 ChoiceButton

Design des choix en mode boutons

Design des choix en mode boutons

# 6-5 ChoiceButtonSet

Design des choix en mode boutons

# 6-6 Combo

Design d'une fausse combobox
  • Option 1
  • Option 2 sélectionnée
  • Option 3
  • Option 4

Fausse combobox en mode "mobile"
  • Option 1
  • Option 2 sélectionnée
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10
  • Option 11
  • Option 12
  • Option 13
  • Option 14
  • Option 1
  • Option 2 sélectionnée
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10
  • Option 11
  • Option 12
  • Option 13
  • Option 14
En général, la zone d'en-pied de cette structure permet de donner des informations complémentaires.

Fausse combobox en mode "desktop"
  • Option 1
  • Option 2 sélectionnée
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10
  • Option 11
  • Option 12
  • Option 13
  • Option 14
  • Option 1
  • Option 2 sélectionnée
  • Option 3
  • Option 4
  • Option 5
  • Option 6
  • Option 7
  • Option 8
  • Option 9
  • Option 10
  • Option 11
  • Option 12
  • Option 13
  • Option 14
En général, la zone d'en-pied de cette structure permet de donner des informations complémentaires.

# 6-7 ErrorZone

Design de zone d'erreur

Attention

# 6-8 FieldSet

Toutes options
faded sans légende :
Encadrement faded avec actions Besoin d'aide ?
Besoin d'aide ?
Encadré sans légende :
Encadrement encadré avec actions
Besoin d'aide ?
Besoin d'aide ?
Encadrement filled sans légende :
Encadrement filled avec actions Besoin d'aide ?
Besoin d'aide ?

Nesting de fieldset
Encadrement faded
Encadrement faded
Encadrement framed
Encadrement filled
Encadrement framed
Encadrement faded
Encadrement framed
Encadrement filled
Encadrement filled
Encadrement faded
Encadrement framed
Encadrement filled

Déclinaisons
Encadrement titré
Encadrement encadré
Encadrement coloré

# 6-9 FormElement

Design d'élements de formulaire
Commentaire
Commentaire
Commentaire

Différents layouts en ligne
Commentaire
Commentaire

Mode embbeded (inline sans largeur prédéfinie, idéal pour le multilangue)
Form control
Form control
Form control
Form control
Commentaire
Form control
Commentaire

Différents layouts multiligne
Commentaire
Commentaire

# 6-10 Input

Design des inputs

Toutes options sur input
€
€
€
€
€
€

Toutes options sur textarea

# 6-11 Label

# 6-12 OptionList

Différents layout
Valeur B

# 6-13 RadioButton

Radio seules tous états

# 6-14 SwitchButton

Switch seuls tous états

Switch avec textes

Switch avec textes

7 Navigation

# 7-1 Alphabet

Design abcdèaire

# 7-2 BreadCrumb

Chemin de fer

Mode Vertical

# 7-3 ChangeLang

Changement de langue

# 7-4 Menu

Menu dropdown horizontal

Menu vertical

# 7-5 MenuItem

Différents contenus possibles des éléments de menu

Toutes options sur éléments de menu

# 7-6 PagePath

Design chemin de page

# 7-7 Pagination

Différents cas

Design pagination

# 7-8 Steps

Design ( simple | avec du contenu )
1
title StepsItem done
Contenu StepsItem done
2
title StepsItem active
Contenu StepsItem active
3
title StepsItem normal
Contenu StepsItem normal
4
title StepsItem lock
Contenu StepsItem lock
1
default Title
default Content
2
StepsItem, active, mandatory, into Steps
Le contact de facturation est identifié parmi les contacts associés à la société sélectionnée.
3
default Title
default Content

8 Utility

# 8-1 AutoGrid

Différentes options

2 colonnes max

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

4 colonnes max

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

12 colonnes max

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

Alignement centré

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

Alignement en haut à gauche

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

Alignement en bas à droite

Contenu court
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu court
Contenu court

# 8-2 Flex

# 8-3 FlexChild

# 8-4 Grid

grid v3
tg-cont tg-grid-6 * 2
colonne
colonne
tg-cont tg-grid-3 tg-grid-4 tg-grid-5
colonne
colonne
colonne
tg-cont-2 tg-grid tg-grid
colonne
colonne
tg-cont-5 tg-grid tg-grid tg-grid tg-grid tg-grid
colonne
colonne
colonne
colonne
colonne
erreur possible:
taille de conteneur et nombre de colonne non corrélé (cont-5 but 4 grid)
colonne
colonne
colonne
colonne
inverse (cont-4 but 5 grid)
colonne
colonne
colonne
colonne
colonne
pas de taille de conteneur ni de colonne
colonne
colonne
colonne
mix v1 v2 | tg-cont-2 et tg-grid-6 * 2
colonne
colonne
v3 | tg-grid + tg-grid__col--6 * 2
colonne
colonne

# 8-5 LocalLoader

Design
Contenu sans loader local

Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu long - Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Contenu avec un loader local

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

# 8-6 Notification

Différentes options
Notification
Description d'une Notification
Notification info
Description d'une Notification info
Notification success
Description d'une Notification success
Notification warning
Description d'une Notification warning
Notification error
Description d'une Notification error
Notification avec les option restante
Description d'une Notification sans bouton close, avec une icone custom et en mode vertical

# 8-7 ToolBar

Toolbar de bloc Back-office
Super tool-bar

Mini Toolbar

toolbar weight
Super tool-bar
Super tool-bar
Super tool-bar

# 8-8 ToolTip

Tous les états
Tooltip d'information
Tooltip d'erreur

9 Widget

# 9-1 Accordion

Accordéon avec actions
Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Accordéon simple
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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.

# 9-2 Carousel

Navigation par fleche en interne
Vertical\Horizontal
start
center
end
spaced
full
start
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

center
---cest---
---cece---
---ceen---
image 1
image 2
image 3
image 4
---cefu---

end
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

full
---fust---
---fuce---
---fuen---
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

Navigation par fleche en externe
Vertical\Horizontal
start
center
end
spaced
full
start
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

center
---cest---
---cece---
---ceen---
image 1
image 2
image 3
image 4
---cefu---

end
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

full
---fust---
---fuce---
---fuen---
image 1
image 2
image 3
image 4
---fufu---

Galery toute options
image 1

Au début (align: start)

au debut (justify: start)

Un contenu potentielement HTML
image 2

Au centre (align: center)

au centrer (justify: center)

Un contenu potentielement HTML
image 3

A la fin (align: end)

a la fin (justify: end)

Un contenu potentielement HTML
image 4

Au centre (align: center)

Espacé 1 (justify: around)

Un contenu potentielement HTML
image 5

Au centre (align: center)

Espacé 2 (justify: between)

Un contenu potentielement HTML
image 6

A droite (align:center)

Espacé 3 (justify:evenly)

Un contenu potentielement HTML

Navigation par pagination en interne
Vertical\Horizontal
start
center
end
spaced
full
start
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

center
---cest---
---cece---
---ceen---
---cesp---
---cefu---

end
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

full
---fust---
---fuce---
---fuen---
---fusp---
image 1
image 2
image 3
image 4

Navigation par pagination en externe
Vertical\Horizontal
start
center
end
spaced
full
start
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

center
---cest---
---cece---
---ceen---
---cesp---
---cefu---

end
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

full
---fust---
---fuce---
---fuen---
---fusp---
---fufu---

Les différents type de navigations

image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4
image 1
image 2
image 3
image 4

# 9-3 ChatBox

Chat seulement
Conversation avec Pierre
Sophie Fonfek
10h32
Bonjour
Pierre
10h33
Bonjour Sophie, comment allez vous ?

Messenger
Conversation avec Pierre
Sophie Fonfek
10h32
Bonjour
Pierre
10h33
Bonjour Sophie, comment allez vous ?
Mes conversations
Jacky Tun Ting
Jacky Tun Ting
21/06
Vous vous êtes trompé de personne.
Sophie Fonfek bis
Sophie Fonfek bis
09h02
Pour tester active + non read
Charles Moden
Charles Moden
11h35
Dit moi, as-tu accès au document présenté cet après-midi ?
Sophie Fonfek
Sophie Fonfek
09h05
Bonjour Pierre, comment allez vous ?

Messenger complet
Conversation avec Pierre
Sophie Fonfek
10h32
Bonjour
Pierre
10h33
Bonjour Sophie, comment allez vous ?
Mes conversations
Charles Moden
Charles Moden
11h35
Normal unread
Sophie Fonfek
Sophie Fonfek
09h05
message actif
Sophie Fonfek bis
Sophie Fonfek bis
09h02
active + unread
normal
normal
21/06
Vous vous êtes trompé de personne.

# 9-4 CookiesBanner

# 9-5 Dialog

Design

Size

# 9-6 Filter

# 9-7 FilterHeaderZone

# 9-8 Progress

Liste de Progress avec icones
0%
50%
100%

# 9-9 Tabs

Tabs horizontal
A-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
B-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
C-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
D-Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tabs sans contenu, exemple pour les onglets de navigation de la fiche

Tabs vertical
A-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
B-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
C-Lorem ipsum dolor sit amet, consectetur adipiscing 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.
D-Lorem ipsum dolor sit amet, consectetur adipiscing 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.

# 9-10 Tag

Liste de tags
  • Lorem ipsum dolor
  • Lorem ipsum dolor
  • Lorem ipsum dolor

Liste de tags avec icones
  • Simple
  • Supprimable
  • Déplacable
  • Déplacable & supprimable
  • Sélectionné
  • Sélectionné & supprimable
  • Sélectionné & déplacable
  • Sélectionné & déplacable & supprimable
  • Placeholder

  • Désactivé
  • Désactivé & supprimable
  • Désactivé & déplacable
  • Désactivé & déplacable & supprimable
  • Sélectionné
  • Sélectionné & supprimable
  • Sélectionné & déplacable
  • Sélectionné & déplacable & supprimable

Liste de tags avec icones
  • style 1
  • style 2
  • style 3
  • style 4
  • style 5
  • style 6
  • style 7
  • style 8
  • style 9
  • style 10

Technique