Information

Cette rubrique est en cours de refonte pour améliorer la lisibilité et la navigation.
Les composants de formulaires restent accessibles via KATYA
Merci pour votre patience.

Ensemble des éléments de formulaires

#ligne-souscrire

Ligne souscrire

#ligne-souscrire-trois-voies

Ligne souscrire trois voies

Les différents cas

  • Le composant se divise en deux blocs distincts :
    • 1 bloc avec une carte primaire (la carte de souscription en ligne),
    • 1 bloc avec 1 ou 2 cartes secondaires (cartes sous fond blanc)
  • La carte primaire de souscription en ligne est obligatoire.
    Elle se différencie des autres par son fond ardoise 20% et elle seule possède un bouton primaire
  • Les textes + icône check au-dessus des boutons primaires et secondaires sont à éviter sur le cas avec 3 cartes
  • La largeur maximum d’une carte est de 300 px
  • Dans le cas où :
    • il y a qu’une seule carte le sous-titre est centré
    • il n’y a pas de CTA sur les cartes secondaires, un champ texte prend sa place
  • État hover :
    • le picto grossi et une ombre apparaît sur la carte
    • sur les cartes sans CTA pas de hover
  • Toute la carte est cliquable

Éléments de conception :

  • Les éléments facultatifs :
    • Les sous-titres ici « votre choix est fait ? » et « Besoin de plus d’information »
    • Les textes + icône check au-dessus des boutons primaires et secondaires (voir cas avec 2 cartes)
    • le bouton secondaire pour les cartes secondaires (voir cas avec une ou plusieurs cartes sans CTA )
  • Les éléments administrables :
    • Tous les textes
    • Les pictos des cartes secondaires
    • Les CTA des cartes secondaires
  • Particularité mobile :
    • Les sous-titres sont centrés
    • Le titre dans la carte reste aligné verticalement et est centré
    • Le picto se cale à gauche et le CTA à droite

#ligne-supplement

Ligne supplément

#ligne-total

Ligne total

#ligne-sous-total

Ligne sous total

#liste

Liste

#loader

Loader

#mise-en-relation

Mise en relation

Pagination

#pave

Pavé

#recapitulatif

Récapitulatif

Tout les composants ci-dessous sont destinés aux pages récapitulatives de services. Pour utiliser ces composants, il faut ajouter la class summary sur le maif-form parent.

Titre label récapitulation

Sur label récapitulation

Label récapitulation

Valeur récapitulation

Récapitulation formule

#recherche-formule

Recherche formule

#resultat-recherche

Résultat recherche

#separateur

Séparateur

#simulateur

Simulateur

#titre-bloc

Titre bloc

#vente-croisee

Vente croisée