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.
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.
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.
HTML
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.
préconisation maif
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.
préconisation maif
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.
PUG
include ../../../mixins/swap-component.pug
include ../../../mixins/tarif.pug
.form-group-version2(role="radiogroup" aria-labelledby="form-radio-details-group")
.wrapper-label
.field-label
p#form-radio-details-group Label .form-check-details-version2 radio
.field-item.-form-check-details-version2
// Tout
.item
input(type='radio', name="RadioDetailsGroupX1", id="RadioDetailsGroupX1")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-medium(for='RadioDetailsGroupX1') Label size-medium 18px + 2 zoneLibre possibles
.wrapper-details
.zone-libre
+swap-component
.zone-libre
+swap-component
// Uniquement le label
.item
input(type='radio', name="RadioDetailsGroupX", id="RadioDetailsGroupX2")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX2') Label size-large 24px
// Avec definitionList
.item
input(type='radio', name="RadioDetailsGroupX3", id="RadioDetailsGroupX3")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX3') Label size-large 24px + DefinitionList en dessous
.wrapper-details
.zone-libre
dl.definition-list-version2.-horizontal
.item
dt IBAN:
dd XX XXXX XXXXXXXXXXX
.item
dt BIC:
dd XXXXXXXXXXXXX
.item
dt Nom de la Banque:
dd Crédit Mutuel
// Avec Tarif
.item
input(type='radio', name="RadioDetailsGroupX4", id="RadioDetailsGroupX4")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX4') Label size-large 24px + composant Tarif
.wrapper-tarif
+tarif('span', 314.95, '€', 'mois', '', '', '-text-align-left -size-large', true)
.wrapper-details
.zone-libre
p 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.
// Avec Preco Maif
.item
input(type='radio', name="RadioDetailsGroupX5", id="RadioDetailsGroupX5")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX5') Label size-large 24px + Préco Maif (composant push)
.wrapper-details
.zone-libre
.push.-neutral.-title-size-large.-suptitle-color-title-3
.wrapper-principal
.wrapper-content
.wrapper-head
.title
hx préconisation maif
.wrapper-components
p Lorem Ipsum
.zone-libre
+swap-component
// Avec additional-field
.item
input(type='radio', name="RadioDetailsGroupX88", id="RadioDetailsGroupX88")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX88') Label if checked new input
.wrapper-details
.zone-libre
p Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
.push.-neutral.-title-size-large.-suptitle-color-title-3
.wrapper-principal
.wrapper-content
.wrapper-head
.title
hx préconisation maif
.wrapper-components
p Nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
.zone-libre
.additional-field.if-checked(aria-live="polite")
.form-group-version2
.wrapper-label
.field-label
label(for='additional-field-textbox-id') Précisez le nombre d’années de perte de revenus que vous désirez couvrir avec votre capital :
.row
.col-md-6
.field-item.-textbox
input#additional-field-textbox-id(type='text', name='textbox')
// Avec Liste
.item
input(type='radio', name="RadioDetailsGroupX6", id="RadioDetailsGroupX6")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX6') Label size-large 24px + Liste
.wrapper-details
.zone-libre
ul.list.-bullet.-color-red
li Text content 1
li Text content 2
li Text content 3
li Text content 4
// Avec Collapse
.item
input(type='radio', name="RadioDetailsGroupX", id="RadioDetailsGroupX7")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsGroupX7') Avec collapse
.wrapper-details
.zone-libre
+swap-component
.wrapper-collapse
button.collapse-handler.collapsed(type='button', data-toggle='collapse', data-target='#collapse-savoir', aria-expanded='false', aria-controls='collapse-savoir')
| En savoir plus
|
.collapse#collapse-savoir
.collapse-content
.zone-libre
+swap-component
// With severity error
.form-group-version2.has-error(role="radiogroup" aria-labelledby="form-radio-details-severity-error")
.wrapper-label
.field-label
p#form-radio-details-severity-error RadioCheckboxDetails - severity error
.field-item.-form-check-details-version2
// severity warrning
.item
input(type='radio', name="RadioDetailsSeverityE", id="RadioDetailsSeverity2")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsSeverity2') Label size-large
.wrapper-details
.zone-libre
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
.item
input(type='radio', name="RadioDetailsSeverityE", id="RadioDetailsSeverity3")
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsSeverity3') Label size-large
.wrapper-details
.zone-libre
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
.help-block
p Message d'erreur à afficher
// disabled
.form-group-version2(role="radiogroup" aria-labelledby="form-radio-details-disabled")
.wrapper-label
.field-label
p#form-radio-details-disabled RadioDetails - disabled
.field-item.-form-check-details-version2
.item
input(type='radio', name="RadioDetailsdisabledW", id="RadioDetailsSdisabled1" disabled)
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsSeverity1') Label size-large
.wrapper-details
.zone-libre
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
.item
input(type='radio', name="RadioDetailsdisabledW", id="RadioDetailsdisabled4" disabled)
.wrapper-custom-input
.wrapper-principal
.wrapper-top
.wrapper-icon
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
.wrapper-content
.wrapper-header
.wrapper-label
.field-label
label.extend-click.-size-large(for='RadioDetailsdisabled4') Label size-large
.wrapper-details
.zone-libre
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.