• Facteurs globaux
  • Palette de couleurs
  • Fonts
  • Transitions
  • Cohérence
  • 1-1 AdminAction
  • 1-2 AdminPlaceholder
  • 2-1 IconSvg
  • 2-2 Image
  • 2-3 Link
  • 2-4 ListHtml
  • 2-5 Separator
  • 2-6 Table
  • 2-7 Text
  • 2-8 Title
  • 3-1 ActionListItem
  • 3-2 Card
  • 3-3 CardHover
  • 3-4 KeyFigure
  • 3-5 NavElem
  • 3-6 Product
  • 3-7 SearchListItem
  • 4-1 MenuImage
  • 5-1 CkEditor
  • 5-2 DhtmlxScheduler
  • 5-3 FlatPickr
  • 5-4 Highchart
  • 5-5 JQueryUiSlider
  • 5-6 JQueryUiSpinner
  • 5-7 JsTree
  • 5-8 Slickgrid
  • 5-9 Tabulator
  • 6-1 Button
  • 6-2 ButtonSet
  • 6-3 CheckBox
  • 6-4 ChoiceButton
  • 6-5 ChoiceButtonSet
  • 6-6 Combo
  • 6-7 ErrorZone
  • 6-8 FieldSet
  • 6-9 FormElement
  • 6-10 Input
  • 6-11 Label
  • 6-12 OptionList
  • 6-13 RadioButton
  • 6-14 SwitchButton
  • 7-1 Alphabet
  • 7-2 BreadCrumb
  • 7-3 ChangeLang
  • 7-4 Menu
  • 7-5 MenuItem
  • 7-6 PagePath
  • 7-7 Pagination
  • 7-8 Steps
  • 8-1 AutoGrid
  • 8-2 Flex
  • 8-3 FlexChild
  • 8-4 Grid
  • 8-5 LocalLoader
  • 8-6 Notification
  • 8-7 ToolBar
  • 8-8 ToolTip
  • 9-1 Accordion
  • 9-2 Carousel
  • 9-3 ChatBox
  • 9-4 CookiesBanner
  • 9-5 Dialog
  • 9-6 Filter
  • 9-7 FilterHeaderZone
  • 9-8 Progress
  • 9-9 Tabs
  • 9-10 Tag
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

Figma
lien discretlien discret hover
lien normallien normal hover
lien mis en avantlien mis en avant hover

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)

Figma
  • Lorem ipsum dolor
  • Lorem ipsum dolor
    • Lorem ipsum dolor
    • Lorem ipsum dolor
  1. Lorem ipsum dolor
  2. Lorem ipsum dolor
    1. Lorem ipsum dolor
    2. Lorem ipsum dolor

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

FIGMA
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText
TextTextText

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
mode grid off
ActionListItem en mode normal avec grand titre
subtitle
A
B
C
Petit titre
subtitle
contenu random
mode grid on
ActionListItem en mode normal avec grand titre
subtitle
A
B
C
Petit titre
subtitle
contenu random

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

Exemple CardHover
Card Hover
color: quiet
Card Hover
color: normal
Card Hover
color: highlight
Card Hover
color: info
Card Hover
color: success
Card Hover
color: warning
Card Hover
color: error
Card Hover
color: disabled
Card Hover
color: 1
Card Hover
color: 2
Card Hover
color: 3
Card Hover
color: 4
Card Hover
color: 5
Card Hover
color: 6
Card Hover
color: 7
Card Hover
color: 8
Card Hover
color: 9
Card Hover
color: 10
Card Hover
sans image

# 3-4 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-5 NavElem

Design des cards "éléments de navigation"
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône entouré
Description : + liste de 2 items + 2 boutons + alignement au centre
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec image non cerclée
Description : + liste de 2 items + 2 boutons + alignement à droite
  • Liste item 1
  • Liste item 2
  • Liste item 3
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

Design des cards "éléments de navigation"
Weightsfadedframedfilled
quiet
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
normal
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
highlight
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Statusfadedframedfilled
info
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
success
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
warning
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
error
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
disabled
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Stylesfadedframedfilled
1
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
3
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
4
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
5
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
6
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
7
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
8
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
9
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
10
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2
Avec icône non entouré
Description : + liste de 2 items + 2 boutons + alignement à gauche
  • Liste item 1
  • Liste item 2
Bouton 1Bouton 2

# 3-6 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-7 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

Figma

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

  • Un lien vers l'erreur
  • Le format de l'email n'est pas valide !

# 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
  • Choose...
  • Valeur A
  • Valeur B
  • Valeur C
  • Valeur D
  • Valeur E
  • Valeur F
  • Valeur G
  • Valeur H
  • Valeur I
  • Valeur J
  • Valeur K

# 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
  • #
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

# 7-2 BreadCrumb

Chemin de fer

Mode Vertical

Mode Mobile

# 7-3 ChangeLang

Changement de langue
  • Français
  • Anglais
  • Espagnol
  • Français
  • Anglais
  • Espagnol
  • Français
  • Anglais
  • Espagnol
  • fr
  • en
  • es
  • fr
  • en
  • es
  • fr
  • en
  • es
  • frFrançais
  • enAnglais
  • esEspagnol
  • frFrançais
  • enAnglais
  • esEspagnol
  • frFrançais
  • enAnglais
  • esEspagnol

# 7-4 Menu

Menu dropdown horizontal
  • Visiteurs(1)
    • Item (1-1)
    • Item (1-2)
      • Item (1-2-1)
      • Item (1-2-2)
    • Item (1-3)
  • Exposant(2)
    • Item (2-1)
    • Item (2-2)
  • Presse(3)

Menu vertical
  • Visiteurs
    • Item 1
    • Item 2
      • Item 2.1
      • Item 2.2
    • Item 3
  • Exposant
    • Item 2.1
    • Item 2.2
  • Presse

# 7-5 MenuItem

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

Drop-down main

  • Texte seul
  • Texte et icône

Drop-down sub

  • Texte seul
  • Texte et icône

Vertical main

  • Texte seul
  • Texte et icône

Vertical sub

  • Texte seul
  • Texte et icône

Toutes options sur éléments de menu

Drop-down main

  • Lien seul
  • Lien et sous-menu
  • Lien seul + parent
  • Lien et sous-menu + parent
  • Lien seul + courant
  • Lien et sous-menu + courant

Drop-down sub

  • Lien seul
  • Lien et sous-menu
  • Lien seul + parent
  • Lien et sous-menu + parent
  • Lien seul + courant
  • Lien et sous-menu + courant

Vertical main

  • Lien seul
  • Lien et sous-menu
  • Lien seul + parent
  • Lien et sous-menu + parent
  • Lien seul + courant
  • Lien et sous-menu + courant

Vertical sub

  • Lien seul
  • Lien et sous-menu
  • Lien seul + parent
  • Lien et sous-menu + parent
  • Lien seul + courant
  • Lien et sous-menu + courant

# 7-6 PagePath

Design chemin de page
  • Accueil
  • Page du chemin
  • Page courante

# 7-7 Pagination

Différents cas
  • 1
  • 2
  • 3
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Design pagination
  • 10
  • 11
  • 12
  • 13
  • 14

# 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

Options
inline: true
Contenu court A
Contenu court B
Contenu court C
inverted: true
Contenu court A
Contenu court B
Contenu court C
vertical: true
Contenu court A
Contenu court B
Contenu court C
vertical+inverted: true
Contenu court A
Contenu court B
Contenu court C
gapped: true
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
padded: true
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
allowWrap: false
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
allowWrap: true
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
Contenu court
alignX: start
Contenu court
Contenu court
Contenu court
alignX: center
Contenu court
Contenu court
Contenu court
alignX: end
Contenu court
Contenu court
Contenu court
alignX: between
Contenu court
Contenu court
Contenu court
alignX: around
Contenu court
Contenu court
Contenu court
alignX: evenly
Contenu court
Contenu court
Contenu court
alignY: start
Contenu court
Contenu court
Contenu court
alignY: center
Contenu court
Contenu court
Contenu court
alignY: end
Contenu court
Contenu court
Contenu court
alignY: between
Contenu court
Contenu court
Contenu court
alignY: around
Contenu court
Contenu court
Contenu court
alignY: evenly
Contenu court
Contenu court
Contenu court

# 8-3 FlexChild

Options
Flex-child priority
Child A (priority main)
Child B (no priority)
Child C (priority min)
Flex-child priority in small area
Child A (priority main)
Child B (no priority)
Child C (priority min)

# 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
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.
Tooltip d'erreur
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 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.
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.
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---

Test responsive
"100":{"items":1},"800":{"items":2},"1000":{"items":3},"1200":{"items":4},"1400":{"items":5},"1600":{"items":6}
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
"400":{"items":2},"800":{"items":4},"1200":{"items":6}
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

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
Fenêtre de dialogue Title
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.
Besoin d'aide
Fenêtre de dialogue Framed
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.
Besoin d'aide
Fenêtre de dialogue filled
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.
Besoin d'aide

Size
Fenêtre de dialogue Popup
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.
Besoin d'aide
Fenêtre de dialogue Mid
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.
Besoin d'aide
Fenêtre de dialogue Full
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.
Besoin d'aide

# 9-6 Filter

# 9-7 FilterHeaderZone

# 9-8 Progress

Liste de Progress avec icones
0%
50%
100%

# 9-9 Tabs

Tabs horizontal
  • Non sélectionné
  • Non sélectionné avec survol
  • Sélectionné
  • Sélectionné avec survol
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
  • Non sélectionné
  • Non sélectionné avec survol
  • Sélectionné
  • Sélectionné avec survol
  • Non sélectionné
  • Non sélectionné avec survol
  • Sélectionné
  • Sélectionné avec survol

Tabs vertical
  • Non sélectionné
  • Non sélectionné avec survol
  • Sélectionné
  • Sélectionné avec survol
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

Forgotten password

  • Pages de tests
    • KJA
      • Formulaire test
      • Showroom website
        • ABOUT
        • PROGRAMME
        • PARTENAIRES
        • Gallery
        • EXHIBITORS
        • PRACTICAL INFORMATION
      • Integration Drawing Art
      • Galleries et carousel
    • MBD
      • Template de formulaires
        • Création de compte
        • Saisie des contacts
        • Saisie des adresses
        • Formulaires en plusieurs étapes
        • Formulaire EC 1 étape
        • Page de confirmation
      • Networking exposant
    • YPA
    • SGI
      • Candidature exposant Thème SW
        • Demande de candidature exposant
      • Recherche Nomenclature
      • Panier Dropdown
      • Déclaration marques BC
      • Déclaration des produits BC
      • Assemblage 5 colonnes et plus
      • Order Contact outside the company
      • POC dashboards
        • Simple
        • Complexe
        • Congress
        • Exposant commercial
        • Exposant administrateur
      • Signalement edition sous entité
    • ADE
    • AMO
    • SBR
      • Dashboard Participant light
      • Dashboard Participant Full
      • Dashboard Exposant Full
      • Pages internes
        • Formulaire à étapes-horizontal
        • Contenu statique
        • Moteur de recherche
        • Boutique e-commerce
        • Formulaire à étapes-vertical
        • Formulaire avec onglet
        • Formulaire-sidebar
        • Moteur de recherche-profil
        • Moteur de recherche-tableau
        • Boutique-liste
    • MGH
  • Pulse theme
    • Structures HTML
    • Éléments typographiques
    • Prévisualisation des pictogrammes
    • Contrôle de saisie
  • Beacon theme
    • Structures HTML
    • Éléments typographiques
    • Prévisualisation des pictogrammes
    • Contrôle de saisie
  • Entry theme
    • Structures HTML
    • Éléments typographiques
    • Prévisualisation des pictogrammes
    • Contrôle de saisie