Ensemble des éléments de formulaires

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