Accédez à votre attestation et autres documents
Title
Subtitle
textContent
Composants de formulaire
Cette page regroupe les composants qui ne sont utilisés que dans des formulaires.
Bonnes Pratiques
Rappel de bonnes pratiques liées aux formulaires & exemples d'assemblage
non selectionné
selectionné
disabled
status erreur
Une sélection est obligatoire avec le formulaire checkbox
Voir la documentation
Ce composant permet l'ouverture d'une modal.
Il est utilisé en inline après le titre d'un FieldSection primary ou secondary, d'un FormGroup...
Voir la documentation
Attention
Ce composant n'est pas encore présent dans la librairie de composants React UI. Il est utilisé uniquement pour le projet simulateur PER.
Voir la documentation
19
février
Rendez-vous téléphonique : 11h30
Motif : Assurance des accidents de la vie
Numéro de téléphone : 0685986574
Voir la documentation
Quelle solution
Titre du bloc
Contenu
Voir la documentation
Bloc next bg
Titre du bloc next default
Contenu
Titre du bloc next default picto-mobilecentre
Titre du bloc next texte
Contenu
Voir la documentation
Bloc next texte
Quelles solutions
Titre du bloc
Voir la documentation
Le véhicule de remplacement
A ce sujet, c'est à vous de prendre une décision :
Voir la documentation
Bienvenue
Prénom Nom
Ce n'est pas vous ? Cliquez sur le bouton "Se déconnecter" pour changer de compte ou bien créer votre propre compte MAIF.
Voir la documentation
Bloc retour-accueil default
Message possible sur plusieurs lignes.
Retour à l'accueil
Voir la documentation
Voir la documentation
Pour un meilleur comportement de l'animation, il est conseiller d'aller voir la documentation.
Succès de l'action
(Titre H2/H3/P) et picto (obligatoires)
Paragraphe facultatif
Voir la documentation
Voir la documentation
Code de vérification, vérification de modifications de données personnelles
Code invalide. Veuillez vérifier la saisie.
Voir la documentation
Pour plus d'information, voir la documentation RGAA du champ combobox ainsi que celle de l'attribut autocomplete.
- valeur 1
- valeur 2
- valeur 1
- valeur 2
Chargement des résultats en cours : (contexte différenciant)
- valeur 1
- valeur 2
- valeur 1
- valeur 2
Chargement des résultats en cours : (contexte différenciant)
- valeur 1
- valeur 2
- valeur 1
- valeur 2
Message d'erreur
- Niort79000
- La Rochelle
- 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9 200 avenue Salvador Allende - CS 90000 - 79038 NIORT cedex 9
2 résultats disponibles.
- valeur 1
- valeur 2
ou
Voir la documentation
Insertion emplois dynamique
-
Création d'emplois en France, relance de l'économie et solidaire
Zone Europe
Niveau de
risque5/7
Performance depuis le 31/12/2019
+ 8,16 %
Performances
-
1 an 24,5 %
-
3 ans 24,5 %
-
5 ans 24,5 %
ISR France
-
ISR France
-
Finansol
-
Relance
Insertion emplois dynamique
-
Création d'emplois en France, relance de l'économie et solidaire
Zone Europe
Niveau de
risque5/7
Performance depuis le 31/12/2019
- 8,16 %
Performances
-
1 an 24,5 %
-
3 ans 24,5 %
-
5 ans 24,5 %
-
ISR France
-
Finansol
-
Relance
Insertion emplois dynamique
-
Création d'emplois en France, relance de l'économie et solidaire
Zone Europe
Niveau de
risque5/7
Performance depuis le 31/12/2019
+ 8,16 %
Performances
-
1 an 24,5 %
-
3 ans 24,5 %
-
5 ans 24,5 %
-
Relance
Voir la documentation
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Combien de pièces sont à déclarer dans votre logement ?
Votre logement est composé de 0 pièce
Counter en erreur
Votre logement est composé de 0 pièce
Le logement doit être composé d'une pièce au minimum.
Voir la documentation
Datebox close-date
RGAA ok
Option d'affichage via la classe .-close-date
au format JJ/MM/AAAA
au format JJ/MM/AAAA
au format JJ/MM/AAAA
Veuillez saisir le champ.
Voir la documentation
Datebox distant-date
RGAA ok
Option d'affichage via la classe .-distant-date
au format JJ/MM/AAAA
au format JJ/MM/AAAA
au format JJ/MM/AAAA
au format JJ/MM/AAAA
Veuillez saisir le champ.
Voir la documentation
Datebox distant-month
RGAA ok
Option d'affichage via la classe .-distant-month
au format MM/AAAA
au format MM/AAAA
au format MM/AAAA
au format MM/AAAA
Veuillez saisir le champ.
Voir la documentation
Datebox time
RGAA ok
Option d'affichage via la classe .-time
au format HH:MM
au format HH:MM
au format HH:MM
au format HH:MM
Veuillez saisir le champ.
Voir la documentation
Nature du sinistre
Responsabilité du conducteur
Nature du sinistre
Responsabilité du conducteur
Voir la documentation
NB l'espacement entre le text optionnel et le boutton(margin-right: 10px) d'ouverture de modal est correct dans la lib-react-ui, n'est pas correct sur Katya du à un bug du compileur html qui crée un espace de trop.
Field section primary
RGAA ok
Option d'affichage .-primary
FieldSection Primary Titre (p/h2/h3)
FieldSection Primary Content/Children
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
FieldSection Primary Titre (p/h2/h3)optional text
FieldSection Primary Subtitle
FieldSection Primary Content/Children
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Implémentation spécifique pour une balise p : p.title
FieldSection Primary Titre (p)
FieldSection Primary Subtitle
FieldSection Primary Content/Children
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Field section secondary
RGAA ok
Option d'affichage .-secondary
FieldSection secondary Titre (p/h2/h3/h4)
FieldSection Primary Content/Children
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
FieldSection Secondary Titre (p/h2/h3/h4)optional text
FieldSection Secondary Subtitle
FieldSection Primary Content/Children
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Version basique (icon + context: primary)
SupTitle
Title + TitleTagName
Tag Contexte
Tag
Description
wrapperTarif
Composant possible dans cette zone : Tarif / Paraphraphe / Separateur
wrapperAdditional
Composant possible dans cette zone : Titre / Liste / Paraphraphe / Separateur / AcceptanceCheckbox
Zone libre (children)
Composant possible dans cette zone : Garantie / Footer
Version basique alt (image + context: secondary)
SupTitle
Title + TitleTagName
Tag Contexte
Tag
Description
wrapperTarif
Composant possible dans cette zone : Tarif / Paraphraphe / Separateur
wrapperAdditional
Composant possible dans cette zone : Titre / Liste / Paraphraphe / Separateur / AcceptanceCheckbox
Zone libre (children)
Composant possible dans cette zone : Garantie / Footer
Version wrapper-tarif
Version wrapper-additional
Title + TitleTagName
Version multi cta
Title + TitleTagName
Version formule-garantie
Title + TitleTagName
Garantie
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
Lorem ipsum dolor sit
Garantie
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Version formule-garantie collapse
Title + TitleTagName
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
- Lorem ipsum dolor sit
- Lorem ipsum dolor sit
Lorem ipsum dolor sit
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Version formule-footer
Title + TitleTagName
Voir la documentation
Version basique
Title + TitleTagName
Title + TitleTagName
Version defaultChecked
Title + TitleTagName
Title + TitleTagName
Version avec Formule.Foooter
Title + TitleTagName
Title + TitleTagName
Version avec Formule.Garantie multi-collapse
Title + TitleTagName
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Title + TitleTagName
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Version en erreur
Title + TitleTagName
Title + TitleTagName
Vous devez choisir une formule.
Voir la documentation
Il est possible de passer la couleur de fond en gris (#666) pour le détail conseil en ajoutant la classe .conseil sur la classe .formule-etiquette
La partie 'total' est optionnelle
Détails de votre cotisation
Cotisation du 26/07/2019 au 31/12/2019
107,72 €
Cotisation 2019
219,63 €
Contribution solidarité victimes terrorisme infractions 2019
5,90 €
Droits d'admission
5,00 €
Frais d'opération
Offert
Total
118,62 €
A régler maintenant en ligne
Par carte bancaire pour activer votre contrat
118,62 €
A régler ultèrieurement
( mode de paiement à choisir dans l’étape paiement )
118,62 €
Voir la documentation
Ce titre se trouve dans le bloc .heading-form dans un wrapper-form-head en amont d'un formulaire.
La structure HTML pour les titres est identique à celle présentée ici : structure titre
la classe -text-align-center est utilisée pour
- soit centrer le texte seul
- soit centrer le combo variant -vertical + icon
L'utilisation de l'icone est optionnelle.
Lors du combo icon + Titre, les cas hybrydes suivant sont possibles : vertcal mobile / horizontal desktop, vertcal center mobile / horizontal desktop, horizontal mobile / vertical desktop, horizontal mobile / vertical desktop centré
en cas d'utilsation d'alignement différent selon les zones de devices il faudra en fonction du besoin utiliser
- soit Les classes -vertical + -horizontal-md
- soit Les classes -horizontal + -vertical-md
texte seul férré à gauche
Subitle (optionnel)
texte seul + Variant -text-align-center
Subitle (optionnel)
Variant -vertical + Img.
Subitle (optionnel)
Variant -vertical + Variant -text-align-center + Img.
Subitle (optionnel)
Variant -vertical + Variant -horizontal-md + Img.
Subitle (optionnel)
Variant -vertical + Variant -text-align-center + Variant -horizontal-md + Img.
Subitle (optionnel)
Variant -horizontal + Img.
Subitle (optionnel)
Variant -horizontal + Variant -vertical-md + Img.
Subitle (optionnel)
Variant -horizontal + Variant -vertical-md + Variant -text-align-center + Img.
Subitle (optionnel)
Variant -horizontal + Variant -vertical-md + Variant -text-align-center + Icon.
Subitle (optionnel)
Voir la documentation
La partie principale du composant est composé du header contenant l'image et le titre.
Variant vertical -vertical avec une image.
Title
SubTitle
TagTexte rgaa
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Title
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Variant horizontal .-horizontal avec une image.
Title
SubTitle
TagTexte rgaa
Alerte d'avertissement
Title
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
Variant vertical en mobile et horizontal à partir du point de rupture md -vertical & -horizontal-md.
Title
SubTitle
TagTexte rgaa
Title
TagTexte rgaa
TagTexte rgaa
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Le svg immat n'est pas dans le sprite par défaut. Il doit être ajouter en fonction de votre besoin dans presentation-settings.json
L’immatriculation est obligatoire.
Voir la documentation
Attention
Pour utiliser correctement le label, se référer à la documentation d'accessibilité.
Default :
* Champ obligatoire
Mention :
Possibilité d'avoir ce visuel également pour une légende.
Juridique :
Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager.
Voir la documentation
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Titre du bloc information 2
Lorem ipsum dolor sit amet :
consectetur adipiscing elit. Maecenas lacinia id turpis non ultricies. Morbi id ultricies tortor. Pellentesque at pharetra nisl. Etiam hendrerit tortor dolor, nec luctus sapien finibus ac.
Nulla pharetra nulla :
a ipsum blandit condimentum. Phasellus sollicitudin metus vitae elit maximus, ac scelerisque quam lacinia. Donec sed dolor tristique, mollis metus nec, malesuada nibh. Cras gravida quam at tincidunt consequat. Nullam ex orci, sollicitudin eu posuere at, venenatis eu lorem.
Contenu bloc information
Titre (h2/h3/h4/p)
Elle sert à indemniser les tiers victimes d’un accident dont vous êtes à l’origine. En cas d’accident corporel (chute, accident domestique, jardinage, bricolage, scolaire, de loisirs ou de sports, d’accident médical, etc).
3,50 €/mois Soit 355,93 € /an
Lorem ipsum dolor sit amet,
Voir la documentation
Total : 381,25 € 1
Soit 446 € / an
Voir la documentation
Voir la documentation
Droit d'adhésion
5 €
Voir la documentation
complément de label/Texte de la Légende
Message d'erreur
Message d'alerte
Voir la documentation
Existe aussi en mode overlayAjouter la classe à la racine du composant : "overlay"
Spinner
RGAA ok
A utiliser si le chargement est inférieur à 4s
Chargement en cours...
Lorem ipsum (h1/h2/h3/p)
Sous-titre
Merci de patienter...
Chargement en cours...
Merci de patienter...
Voir la documentation
Barre de chargement
RGAA ok
A utiliser si le chargement est supérieur à 4s
1. En JS, ajuster la variable css --main-animation-duration en fonction du temps de réponse estimé
2. Pour lancer l'animation, ajouter la classe ".start-animation" sur la div ".loader-version2"
3. Quand la tâche est terminée, remplacer la classe ".start-animation" par ".end-animation"
Chargement en cours...
Lorem ipsum (h1/h2/h3/p)
Sous-titre
Merci de patienter quelques instants...0%
Chargement en cours...
Lorem ipsum (h1/h2/h3/p)
Sous-titre
Un email de confirmation vient de vous être envoyé, il contient les informations récapitulative de votre souscription.
Merci de patienter quelques instants...0%
Chargement en cours...
Lorem ipsum (h1/h2/h3/p)
Sous-titre
Un email de confirmation vient de vous être envoyé, il contient les informations récapitulative de votre souscription.
Merci de patienter quelques instants...0%
Voir la documentation
Numéro unique *
09 78 97 98 99
* appel non surtaxé, coût selon opérateur
Voir la documentation
Ligne titre 1
Ligne titre 2
Message d'attente ...
Voir la documentation
Voir la documentation
Montant des droits d'adhésion : 5,00 €
Voir la documentation
Radio
Ceci est un exemple. Le composant Radio Illustration Dynamique permet d'afficher une illustration différente en fonction de la sélection du bouton radio. Le SVG constituant l'image est composé de masques avec des classes "value-x" avec x de 1 à 5, le SVG doit être stocké dans Jahia. La correspondance des images avec les boutons radio est portée par ces classes.
Radio Illustration Dynamique 5 entrées
Radio Illustration Dynamique .has-success
Radio Illustration Dynamique .has-error
Veuillez faire une selection
Voir la documentation
Le choix des colonnes des items radio et checkbox est libre (voir règles UI)
Les éléments suivants sont facultatifs :
- image / picto
- tarif
- modal
Radio .-vertical
RGAA ok
.form-check-version2.-vertical type='radio'
Radio défaut (regroupé)
Radio défaut .has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Radio défaut disabled (regroupé)
Voir la documentation
Radio .-horizontal
RGAA ok
.form-check-version2.-horizontal type='radio'
Radio .-horizontal (regroupé)
Radio .-horizontal - .complementary (regroupé)
Radio .-horizontal - Icône
Radio .-horizontal.has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Radio .-horizontal disabled (regroupé)
Voir la documentation
Radio .-horizontal.-vertical-md
RGAA ok
.form-check-version2.-horizontal.-vertical-md type='radio'
Radio .-horizontal.-vertical-md (regroupé)
Radio .-horizontal.-vertical-md.has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Radio .-horizontal.-vertical-md disabled (regroupé)
Voir la documentation
Radio .-horizontal.-condensed
RGAA ok
.form-check-version2.-horizontal.-condensed type='radio'
Radio .-horizontal.-condensed (regroupé)
Radio .-horizontal.-condensed - Multiligne (regroupé)
Radio .-horizontal.-condensed .has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Radio .-horizontal.-condensed disabled (regroupé)
Voir la documentation
Checkbox .-vertical
RGAA ok
.form-check-version2.-vertical type='checkbox'
Checkbox défaut (regroupé)
Checkbox défaut .has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Checkbox défaut disabled (regroupé)
Voir la documentation
Checkbox .-horizontal
RGAA ok
.form-check-version2.-horizontal type='checkbox'
Checkbox .-horizontal (regroupé)
Checkbox .-horizontal - .complementary (regroupé)
Checkbox .-horizontal - Icône
Checkbox .-horizontal.has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Checkbox .-horizontal disabled (regroupé)
Voir la documentation
Checkbox .-horizontal.-vertical-md
RGAA ok
.form-check-version2.-horizontal.-vertical-md type='checkbox'
Checkbox .-horizontal.-vertical-md (regroupé)
Checkbox .-horizontal.-vertical-md.has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Checkbox .-horizontal.-vertical-md disabled (regroupé)
Voir la documentation
Checkbox .-horizontal.-condensed
RGAA ok
.form-check-version2.-horizontal.-condensed type='checkbox'
Checkbox .-horizontal.-condensed (regroupé)
Checkbox .-horizontal.-condensed - Multiligne (regroupé)
Checkbox .-horizontal.-condensed .has-error (regroupé)
Une sélection est obligatoire avec le formulaire checkbox
Checkbox .-horizontal.-condensed disabled (regroupé)
Voir la documentation
Seul le label (size-medium ou size-large) est obligatoire, les autres éléments sont optionnels:
- tarif
- picto
- texte complémentaire/description
- préconisation Maif
- question additionnelle
- collapse
- autres composants pouvant être contenus dans les zones libres (Liste, DefinitionList, Textbox, ...)
Radio -details
RGAA ok
Label .form-check-details-version2 radio
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
- IBAN:
- XX XXXX XXXXXXXXXXX
- BIC:
- XXXXXXXXXXXXX
- Nom de la Banque:
- Crédit Mutuel
314.95 € par mois /mois Soit 12 345,93 € par an
Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou vous protéger en cas de perte totale et irréversible d'autonomie.
Lorem Ipsum
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
Nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
- Text content 1
- Text content 2
- Text content 3
- Text content 4
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
RadioCheckboxDetails - severity error
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Message d'erreur à afficher
RadioDetails - disabled
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Voir la documentation
Checkbox -details
RGAA ok
Label .form-check-details-version2 radio
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
- IBAN:
- XX XXXX XXXXXXXXXXX
- BIC:
- XXXXXXXXXXXXX
- Nom de la Banque:
- Crédit Mutuel
314.95 € par mois /mois Soit 12 345,93 € par an
Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou vous protéger en cas de perte totale et irréversible d'autonomie.
Lorem Ipsum
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
Nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
- Text content 1
- Text content 2
- Text content 3
- Text content 4
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
RadioCheckboxDetails - severity error
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Message d'erreur à afficher
CheckboxDetails - disabled
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Voir la documentation
Récapitulatif (hN)
Protection de vos biens (avec gras)
- Lorem ipsum dolor
- 123,45 €
Lorem ipsum dolor
- 123,45 €
- Tilya SUHPYC
- 1/3
-
né(e) me 03/01/2010 à Niort
demeurant ANDRE ROUSSIN 13480, CABRIES
à défault le(s) bénéficiaire(s) suivant(s) en cas de décès ou de renonciation :- Juliette PLANTIER
né(e) le 06/09/1965 à 79000, BESSINES - Juliette PLANTIER
né(e) le 06/09/1965 à 79000, BESSINES
à défault me(s) héritiers.
Attention
Titre H2/H3/H4 et picto (facultatifs) Avertissement
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
- Juliette PLANTIER
- Lorem ipsum dolor
- Lorem ipsum dolor
-
Lorem ipsum dolor
Lorem ipsum dolor - Adresse Email
- prenom.nompersonne@clubinternet.com
- Lorem ipsum dolor
- Jusqu'à 123 45 €
Protection de vos biens (sans gras) (hn)
- Lorem ipsum dolor sit
- Jusqu'à 123 456 €
- Propriétaire :
- prénom et nom
- Tél. :
- 01 23 45 67 89
- Tél. :
- 01 23 45 67 89
-
Attention
Titre H2/H3/H4 et picto (facultatifs) Avertissement
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
- E-mail :
- prenom.nom@email.com
-
Lorem ipsum dolor
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-
Lorem ipsum dolor
Information
-
Prise en charge du vol isolé d'accessoires :
- intégrés (selle, batterie, roue),
- fixés au vélo(non démontables sans outils : sacoche, remorque, GPS),
- de sécurité (casque, antivol agréé, siège enfant).
Déclarez bien la valeur de vos biens.
Information
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Information
-
-
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-
Lorem ipsum dolor sit amet, (X,xx/mois)
Lorem ipsum dolor sit amet
- Lorem ipsum dolor
(Lorem ipsum dolor sit amet, consectetur adipiscing) - Oui
- Lorem ipsum dolor
- Oui
- Tél. :
- 01 23 45 67 89
Attention
Titre H2/H3/H4 et picto (facultatifs) DEFAULT
Toutes les déclinaisons de séverités du information-standard reverse sauf sont possibles sauf border et pas de lien ni de bouton
Lorem ipsum dolor sit amett, (1,23 €/mois)
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
- Jusqu'à 123 456 €
- Propriétaire :
- prénom et nom
- Tél. :
- 01 23 45 67 89
- E-mail :
- prenom.nomemail.com
Lorem ipsum dolor 18px
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.
- Lorem ipsum dolor
(Lorem ipsum dolor sit amet, consectetur adipiscing) - Oui
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Non
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor sit
- Jusqu'à 123 456 €
- Propriétaire :
- prénom et nom
- Tél. :
- 01 23 45 67 89
- E-mail :
- prenom.nomemail.com
Lorem ipsum dolor 18px
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.
- Lorem ipsum dolor
(Lorem ipsum dolor sit amet, consectetur adipiscing) - Oui
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Non
- Lorem ipsum dolor
- Oui
- Souscripteur :
- M.Jean Dujardin, né le 01/05/1990
- E-mail :
- monadress@mail.fr
- N° de téléphone :
- 01 02 03 04 05
Lorem ipsum dolor sit amet
- Souscripteur :
- M.Jean Dujardin, né le 01/05/1990
- E-mail :
- monadress@mail.fr
- N° de téléphone :
- 01 02 03 04 05
Voir la documentation
Martin Dupont (p/h2/h3/h4)
- 01/01/1976 à RENNES
- 18 rue de Bessac 79000 NIORT
%
Bénéficiaires en cas de renonciation ou de décès prématuré :
- Julie Martinez
- Tom Vichard
Martin
Dupont (p/h2/h3/h4)- 01/01/1976 à RENNES
- 18 rue de Bessac 79000 NIORT
%
Le total des parts attribuées doit être égal à 100%.
Bénéficiaires en cas de renonciation ou de décès prématuré :
à défaut, mes enfants nés ou à naître à égalité, vivants ou représentés
Louise ARNAUD (p/h2/h3/h4)
- 15/02/1991
- 8 rue du chat qui pêche 75005 PARIS
Part attribuée1/3
Bénéficiaires en cas de renonciation ou de décès prématuré :
- Léo ARNAUD
Voir la documentation
Identification requise
1 personne = 1 place = 1 ceinture
3e facteur de mortalité sur les routes après la vitesse et l'alcool, le non-port de la ceinture de sécurité fait encore trop de victimes, surtout chez les jeunes enfants. Si tout le monde était attaché, près de 400 vies pourraient être épargnées chaque année sur la route.
/conseils-prevention/sur-la-route/prevenir-les-risques-routiers/securite-en-voiture/ceinture-de-securite/ceinture-de-securite.htmlÉthylotests obligatoires
Les éthylotests sont désormais obligatoires à bord de votre véhicule et ce depuis le 1er juillet 2012.
/conseils-prevention/sur-la-route/prevenir-les-risques-routiers/securite-en-voiture/ethylotest/ethylotests-obligatoires.html Voir la documentation
Voir la documentation
Souscription
Besoin d’aller plus loin ?
Retrouvez nous sur votre espace personnel ou sur l’appli MAIF
Contactez facilement nos conseillers et gerez vos rendez-vous MAIF
Accédez à nos services d’assistance où que vous soyez
Voir la documentation
Separator
Separator -addition
Voir la documentation
Anciennement appelé action étape.
StepAction -vertical
RGAA ok
L'affichage des CTA se fait de manière verticale en mobile avec la classe -vertical et devient horizontale à partir du breakpoint sm (Mobile Landscape) avec la classe -horizontal-sm.
Voir la documentation
StepAction -horizontal
RGAA ok
L'affichage des CTA se fait de manière horizontale avec la classe -horizontal.
Voir la documentation
Composant stepper (radio regroupé)
Composant stepper (radio regroupé)
Composant stepper (radio regroupé)
Veuillez sélectionner une valeur
Composant stepper (radio regroupé)
Veuillez sélectionner une valeur
Voir la documentation
Option d'affichage via les classes.-swipe, .-items-per-line (et déclinaisons selon breakpoints et nombre de colonnes, ex: -items-per-line-md-3), .-horizontal(et déclinaisons en breakpoints, ex: -horizontal-md)
Nombre d'items visibles sur une rangée par défaut : 1 en XS-SM (576px), 2 en MD (768px), 3 en LG (992px), 4 en XL (1200px)
Structure Swipe
RGAA ok
Option d'affichage via la classe .-swipe
Structure variant Swipe
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Structure Scroll-to-highlight
RGAA ok
Option d'affichage via la classe .-swipeet .-highlight-itemsur le structure-item
Structure variant Swipe avec swipe automatique sur item
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Item highlight
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Structure Horizontal
RGAA ok
Option d'affichage via la classe .-horizontal
Structure variant Horizontal
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Structure Items per Line
RGAA ok
Option d'affichage via la classe .-items-per-line+ breakpoint (md, lg,...)
Structure : Surchages du nombre d'items par ligne selon les breakpoints
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Structure Swipe to Horizontal
RGAA ok
Option d'affichage via la classe .-swipe .-horizontal + breakpoint (md, lg,...)
Structure : Variant Swipe SM/XS puis Horizontal
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Structure : Variant Swipe jusqu'en MD puis Horizontal + Surcharge du nombre d'items en MD
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Structure : Variant Swipe jusqu'en LG puis Horizontal + Surcharge du nombre d'items en LG
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Voir la documentation
Catégorie
Définition
Danger
Exemple
Conditions de vente
Catégorie 1
Artifices de divertissement qui présentent un danger très faible et un niveau sonore négligeable et qui sont destinés à être utilisés dans des espaces confinés, y compris les artifices destinés à être utilisés à l'intérieur d'immeubles d'habitation
Très faible
Cierges magiques
Vente libre pour les personnes de plus de 12 ans
Catégorie 2
Artifices de divertissement qui présentent un danger très faible et un niveau sonore négligeable et qui sont destinés à être utilisés dans des espaces confinés, y compris les artifices destinés à être utilisés à l'intérieur d'immeubles d'habitation
Très faible
Cierges magiques
Vente libre pour les personnes de plus de 12 ans
Voir la documentation
Formule RAQVAM - Assurance Habitation et vie quotidienne
Formule
Primordiale
22
,22 €/ MOIS(1)
Formule
Arbitrage
44
,44 €/ MOIS(1)
+ 5
,51 €/ JOUR*
Formule
Equilibre
66
,66 €/ MOIS(1)
Formule
Sérénité
88
,88 €/ MOIS(1)
Protection de vos biens
Garanties
Garantie incendie, explosion
Inclus
Inclus
Inclus
Inclus
Garantie dégâts des eaux
-Non Inclus
-Non Inclus
Inclus
Inclus
Garantie événements climatiques (tempête, neige, grêle, foudre...) et catastrophes naturelles
Inclus
Inclus(aria-hidden='true')Inclus
5 ans
illimité
Garantie des risques de catastrophes technologiques
Inclus
Inclus
Inclus
Inclus
Garantie attentas
Inclus
Inclus
Inclus
Inclus
Garantie vol
Inclus
Inclus
Inclus
Inclus
Garantie autres dommages accidentels
Inclus
Inclus
Inclus
Inclus
Option
Option "Jardin +"
-Non Inclus
-Non Inclus
-Non Inclus
OK
Vous nous avez indiqué posséder une piscine.
Nous vous conseillons fortement d'ajouter cette option, car en cas d'intempéries (grêle par exemple), les dégâts causés à votre piscine ne seraient alors pas pris en charge.
Biens nomades multimédia Couverture tous risques en tous lieux, y compris contre le vol et le bris
-Non Inclus
-Non Inclus
-Non Inclus
OK
OK
OK
Formule
Primordiale
22
,22 €/ MOIS(1)
Formule
Arbitrage
44
,44 €/ MOIS(1)
Formule
Equilibre
66
,66 €/ MOIS(1)
Formule
Sérénité
88
,88 €/ MOIS(1)
Voir la documentation
Textbox type text
RGAA ok
Title
Lorem ipsum- Lorem ipsum
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius error modi provident officiis cumque voluptates consectetur, officia obcaecati doloremque, id laudantium, nobis perspiciatis molestiae architecto commodi harum laboriosam qui. Quisquam!
- Lorem ipsum
- Lorem ipsum
sdfsdfsdf
Message d'erreur
Message d'attention.
Voir la documentation
Textbox type columns
RGAA ok
Prefixe
Suffixe
Prefixe
Suffixe
Message d'erreur
Message d'attention.
Voir la documentation
Ce composant est généralement précédé par une date JJ Mois Année. Exemple ci-dessous:
16 Avril 2025
-
InitiéeÉtape validée
-
En attente
de signatureÉtape validée -
SignéeÉtape en cours
-
En cours
de traitement -
Demande
traitée
Voir la documentation
Timepicker
RGAA ok
Créneaux du lundi 1 au mercredi 3 Juillet
- Lundi 1 juillet
- Mardi 2 juillet
- Mercredi 3 juillet - aucun créneau disponible pour ce jour
Voir la documentation
Timepicker .has-error
RGAA ok
Créneaux du lundi 1 au mercredi 3 Juillet
- Lundi 1 juillet
- Mardi 2 juillet
- Mercredi 3 juillet - aucun créneau disponible pour ce jour
-
—
Voir la documentation
Timepicker .-no
RGAA ok
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Voir la documentation
Ce composant ne s'ajoute pas dans un formulaire, mais juste avant la div .col-form-container
Voir la documentation
Le composant Total correspond à la version 2 de l'ancien composant ligne-produit.
Il a la particularité d'avoir une zone Complementary (facultative) qui se trouve au dessus de la zone Principale.
Certaines des déclinaisons suivantes sont cumulables entre elles :
- position:
-vertical/-horizontal/-horizontal-lg - verticalAlign:
-vertical-align-left/-vertical-align-center. Attention ces variants ne s'appliquent que lorsque le variant-verticalest utilisé.
-vertical -vertical-align-left
RGAA ok
Position verticale & verticalAlignLeft : les informations sont affichées les unes sous les autres avec les classes .-vertical & -vertical-align-left .
Si le variant .-vertical est utilisé il doit être accompagné d'un des variants de verticalAlign -vertical-align-left ou -vertical-align-center.)
ces variants définissent l'alignement des informations contenues dans la zone principale.
Title
subtitle optional
12 345.93 € par mois /mois Soit 12 345,93 € par an
Description optionnelle style paragraphe OU
Description optionnelle style mention.
Voir la documentation
-vertical -vertical-align-center
RGAA ok
Title
subtitle optional
12 345.93 € par mois /mois Soit 12 345,93 € par an
Description optionnelle style paragraphe OU
Description optionnelle style mention.
Voir la documentation
-horizontal
RGAA ok
Position horizontale : le wrapperTitle et le composant Tarif cote à cote avec la classe .-horizontal .
Title
subtitle optional
345.93 € par mois /mois Soit 12 345,93 € par an
Description optionnelle style paragraphe OU
Description optionnelle style mention.
Voir la documentation
hybrid
RGAA ok
Position verticale & verticalAlignCenter en Mobile & horizontale à partir du format Desktop (LG) avec les classes .-vertical, -vertical-align-center & code .-horizontal-lg .
Title
subtitle optional
345.93 € par mois /mois Soit 12 345,93 € par an
Description optionnelle style paragraphe OU
Description optionnelle style mention.
Voir la documentation
complementary
RGAA ok
Implémentation avec la partie wrapperComplementary représentant la vue détaillée de la somme totale. (la version présentée est avec le variant -vertical & -vertical-align-left ).
Attention la 1ère zone-libre "swapComponent" est obligatoire et doit comporter au minimum un composant definitionList.
Title
subtitle optional
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Title
subtitle optional
12 345.93 € par mois /mois Soit 12 345,93 € par an
Description optionnelle style paragraphe OU
Description optionnelle style mention.
Exemple avec les zones libres remplies utilisant les variants -light & -small du definition List, les variants -neutral & -highlight du Tarif small ainsi que le style .text-legend.
Détail du prix
- Cotisation annuelle 2025
- 128,39 €
- A régler maintenant
-
128.39 €
- dont frais d'adhésion
- A régler ultérieurement
-
128.39 €
- en fonction de votre prélèvement 128,76 €
- Droits d'adhésion
-
1 €
- A payer uniquement lors du premier réglement.
- A régler maintenant
-
128.39 €
- dont frais d'adhésion
- 5,00 €
- dont frais d'adhésion à payer ultérieurement
- 2,00 €
Inclus une réduction enfant de sociétaire d'une valeur de 20,00 €
Total de vos cotisations 2025
198.13 €
Voir la documentation
(Affichage par défaut)
(Affichage Une fois que les boutons sont sélectionnés)
Voir la documentation
- Soins courants : Niveau 4
- Hospitalisation : Niveau 3
- Dentaire : Niveau 4
- Optique : Niveau 5
- Audio : Niveau 1
Voir la documentation
Composant de base
Composant Erreur fichier envoyé
Veuillez déposer le(s) document(s) attendu(s)
nomdufichier.pdf
Typage du fichier
159 Ko
Êtes-vous sûr de vouloir supprimer ce document ?
nomdufichier.pdf
Typage du fichier
159 Ko
Êtes-vous sûr de vouloir supprimer ce document ?
Ecran selection
Veuillez faire une sélection
Voir la documentation
Le step actif est h1 par défaut, la sémantique est modifiable en h2 | p selon le model de construction du form
Wizard step
Step 3 3 sur 6
- Step 1Étape validé
- Étape validé
- Step 3 Étape actuelle
- Step 4 wording un peu long
- Step 5
- Step 6
Voir la documentation
Wizard step with substep
Certaines étapes peuvent contenir des sous-étapes (de 2 à 6). Le visuel est modifié et on a un message en sr-only pour avertir les utilisateurs de lecteur d'écrans de leur progression dans le Wizard.
Exemple ci-dessous: on se trouve dans la 2ème sous-étape de l'étape 3 en cours. La value est à 50% car dans l'étape 3 car il y a 4 sous-étapes.
Step 3 3 sur 6
- Step 1Étape validé
- Étape validé
- Step 3 Étape actuelle
- Step 4 wording un peu long
- Step 5
- Step 6
Voir la documentation